CSS Gradients that avoid the “gray dead zone” • Hacker News Board

Re: CSS Gradients that avoid the “gray dead zone”

#11

Post by eatonphil » Tue, Jan 11, 2022, 6:48 PM UTC

gnabgib wrote: post #10

Since this is posted by you, Josh.. is the date in the article inaccurate (should the year be 2022?) or did you just decided to push to HN on the one year anniversary? (Title might benefit from the year)

Personally, when it's so recent (like within last year or three) I don't really care if the title is missing the year on HN. It becomes more useful when it's clearly a dated (i.e. maybe incorrect or no longer relevant) article.

Re: CSS Gradients that avoid the “gray dead zone”

#12

Post by dexwiz » Tue, Jan 11, 2022, 6:54 PM UTC

Love 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).

Re: CSS Gradients that avoid the “gray dead zone”

#13

Post by tvanantwerp » Tue, Jan 11, 2022, 6:56 PM UTC

I used to do gradient interpolations all the time in dataviz using D3, and using HSL/HCL/LAB always created better gradients. I wish we had color mode options in CSS gradients, but this is a good workaround for now.

Re: CSS Gradients that avoid the “gray dead zone”

#14

Post by recursive » Tue, Jan 11, 2022, 6:57 PM UTC

Trufa wrote: post #8

As a (web/app) developer, I'd really wish I had any sort of talent do beautiful things, this person clearly has a sense of aesthetics that I don't, while I know that practice would make it better, I just don't feel that I'd get there. Congrats to the author for such a cool product!

It's always possible to convince yourself that you couldn't do something.

But everyone that ever did achieve it only did so with practice.

Re: CSS Gradients that avoid the “gray dead zone”

#15

Post by gnabgib » Tue, Jan 11, 2022, 6:59 PM UTC

eatonphil wrote: post #11

gnabgib wrote: post #10

Since this is posted by you, Josh.. is the date in the article inaccurate (should the year be 2022?) or did you just decided to push to HN on the one year anniversary? (Title might benefit from the year)

Personally, when it's so recent (like within last year or three) I don't really care if the title is missing the year on HN. It becomes more useful when it's clearly a dated (i.e. maybe incorrect or no longer relevant) article.

Well, I reckon it's a typo rather than an old article.. I can't believe that a joshwcomeau.com article would only have 2000 visits in a year, and most of us type/write/speak the wrong year in early January :D

Re: CSS Gradients that avoid the “gray dead zone”

#16

Post by gwern » Tue, Jan 11, 2022, 7:00 PM UTC

hwatkins wrote: post #6

xibalba wrote: post #4

I really, really like Mr. Comeau's "Me" avatar. In fact, his whole site is quite beautiful and pleasing.

I agree, most sites are very aggressive with popups and modals, that having a small pleasant avatar peak out at you is a nice change.

No, it's still bad. For example, it hijacks the space bar. You're spacing/pgdwning like normal when it pops out, then it hijacks the space to open up a nag modal. It was terrible when it was Clippy, it's terrible when it's a Bob the Builder avatar. Comeau's website never sparks joy in me because I'm always wondering what the next bullshit will be (was this the one which for a while was doing sparkles after the mouse?).

Re: CSS Gradients that avoid the “gray dead zone”

#17

Post by eatonphil » Tue, Jan 11, 2022, 7:00 PM UTC

gnabgib wrote: post #15

eatonphil wrote: post #11

Earlier quoted context omitted.

Personally, when it's so recent (like within last year or three) I don't really care if the title is missing the year on HN. It becomes more useful when it's clearly a dated (i.e. maybe incorrect or no longer relevant) article.

Well, I reckon it's a typo rather than an old article.. I can't believe that a joshwcomeau.com article would only have 2000 visits in a year, and most of us type/write/speak the wrong year in early January :D

Oh yeah could be. It doesn't show up on archive.org [0] before today which might further agree with you.

[0] https://web.archive.org/web/*/https://www.joshwcomeau.com/cs...

Re: CSS Gradients that avoid the “gray dead zone”

#18

Post by Aardwolf » Tue, Jan 11, 2022, 7:02 PM UTC

hwatkins wrote: post #6

xibalba wrote: post #4

I really, really like Mr. Comeau's "Me" avatar. In fact, his whole site is quite beautiful and pleasing.

I agree, most sites are very aggressive with popups and modals, that having a small pleasant avatar peak out at you is a nice change.

Heh, I didn't like it, I never like when something pops up and animates on a website after a timer while you're reading, I never like when something overlays any part left or right of the text you're trying to read, and I never like when you have to close something to continue distraction free. This thing is exactly an aggressive modal popup.

Re: CSS Gradients that avoid the “gray dead zone”

#19

Post by azangru » Tue, Jan 11, 2022, 7:04 PM UTC

This was discussed on the http203 podcast: https://youtu.be/cGyLHxn16pE

Re: CSS Gradients that avoid the “gray dead zone”

#20

Post by red_trumpet » Tue, Jan 11, 2022, 7:06 PM UTC

liuliu wrote: post #3

Because Hue is a degree, you can walk either clockwise or counter-clockwise. That is why in the Javascript widget (the one to select midpoints and color spaces), HSL v.s. Lab v.s. HCL acted quite differently. You probably also need a tweak for that in the "Gradient Generator" widget too.

> Because Hue is a degree

A bit nitpicky but: Hue is an angle, degree is it's unit.

Like the width of a football field is a length, meter is it's unit.

Otherwise, good point!