I got here throughout Alexey Ardov’s work the opposite day. Appears to be like like the colour bug hit him fairly exhausting. I first noticed this playground:
It’s awfully cool. I like seeing coloration palettes offered within the context of UI like that. Generally it’s exhausting to image the way it all may come collectively if colours are checked out too abstractly. It doesn’t precisely have an export device, however a bunch of CSS customized properties are barfed out right into a type attribute on the <physique> if you happen to have been so inclined to make use of them for one thing.
In fact I believed: HSL is properly used right here, however what concerning the HDR coloration codecs?! Looks as if a superb alternative to arrange P3 colours and non-P3 coloration fallbacks. I don’t assume this truth is misplaced on Alexey, as they’ve tons extra coloration experiments they’ve constructed. For instance, this visualizer for taking a look at coloration fashions, which then it appears to be like like acquired an improve to visualise extra fashions (and gamuts).
I like taking a look at these issues as they’re a reminder of simply how designed these coloration areas are and the way deep the rabbit gap can go. Earlier than you realize it, you’re designing extraordinarily subtle accessible coloration palette technology instruments.
these one-off single-purpose web sites at all times places me within the temper to share extra. Aren’t you fortunate that I save hyperlinks to new ones that I see only for instances like this.
CSS-Sample
Temani Afif’s sample website has some fairly subtle backgrounds which can be performed simply with CSS backgrounds. Jogs my memory of Lea’s tackle this from years in the past. A grand custom of CSS wizards.
SpaceBadgers
These little badge graphics which can be tremendous frequent on the prime of GitHub repos, created with a brilliant clear URL format.
Oh and hey they give the impression of being nice small however you can also make them as huge as you need and since they’re SVG they scale up properly.
Theme Toggles
Want a neat little animated toggle for Mild Mode / Darkish Mode? This website has a complete bunch of them:
Wasn’t a lot to pluck one over to a Pen, in case you want a reference there. I noticed a little bit controversy on this as one of many utilization choices is as a <div>, which after all is just not an interactive component. I’m unsure that’s truthful, as you may use this as a visible adornment subsequent to an interactive button, for instance. And the React exports use <button> properly.
Tree
I’m sorry I can’t clarify it, however typically you need to replace supposed textual content to have a bunch of additional particular ASCII characters that higher characterize a file tree.
Customized Form Dividers
Within the rectangular world of internet design, typically simply what you want is one thing… not rectangular.
The positioning gives SVG, HTML, and CSS so that you can copy out, which, I’m positive you’re conscious, plunking over to CodePen to play with is a snap. Gosh, isn’t CodePen helpful? You must go PRO.
