Always psyched to see a post from josh.
Really insightful deep dives into a very misunderstood technology, presented with a fun, lighthearted writing style that I find myself trying to emulate in my own technical writing.
CSS Gradients that avoid the “gray dead zone”
21–30 of 151 posts
Re: CSS Gradients that avoid the “gray dead zone”
#22Love 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).
It looks like a note has been added describing how to use the control.
But obviously this is admitting that this control isn't intuitive enough.
Re: CSS Gradients that avoid the “gray dead zone”
#23Earlier quoted context omitted.
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?…
I seriously wonder if a person exists that likes being bothered when they're trying to read something? If that's not the case, and in fact nobody likes this, why anyone would think that this was a good idea?
Re: CSS Gradients that avoid the “gray dead zone”
#24Because 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!
For Americans: it's football (the one with your hands) and measured in yards
Re: CSS Gradients that avoid the “gray dead zone”
#25Is there a primer to colour spaces for a beginner?
Re: CSS Gradients that avoid the “gray dead zone”
#26For those who didn't realize, there's a ton of interactive sliders on that page.
(it didn't dawn on me until I accidentally bumped a slider and realized the page was interactive)
Re: CSS Gradients that avoid the “gray dead zone”
#27The gradient generator Josh introduces here is pretty nice [0]! And the HSL vs RGB theory is also pretty interesting. I'll give this generator a try next time I want one. But my favorite gradient generator at the moment (most pleasant gradients IMO) is still [1]. [0] https://www.joshwcomeau.com/gradient-generator/ [1] https://mycolor.space/gradient
I like [0] better as it gives you faster feedback. My only complain is that the web-app background is a png (should be gradients).
Re: CSS Gradients that avoid the “gray dead zone”
#28For those who didn't realize, there's a ton of interactive sliders on that page. (it didn't dawn on me until I accidentally bumped a slider and realized the page was interactive)
its in the site's defense there is a note that says
> How to use: Click and drag within the color gradient, or focus the color square and use the left/right arrow keys.
Re: CSS Gradients that avoid the “gray dead zone”
#29I enjoyed this one very much. Thanks for creating such high quality content.
Re: CSS Gradients that avoid the “gray dead zone”
#30Nice. Things ending up being gray is a common problem on the web.
I took a deep dive into gradients some time ago. Not CSS but custom calculations that evened out things like brightness, luminescence, contrast and so on. My key takeaway was that my preferred way of doing gradients was to use similar hues and also play around with the saturation of the colors. One does not need complimentary colors to get that gradient feel.