I came across Alexey Ardov’s work the other day. Looks like the color bug hit him pretty hard. I first saw this playground:
It’s awfully cool. I like seeing color palettes presented in the context of UI like that. Sometimes it’s hard to picture how it all might come together if colors are looked at too abstractly. It doesn’t exactly have an export tool, but a bunch of CSS custom properties are barfed out into a style attribute on the <body> if you were so inclined to use them for something.
Of course I thought: HSL is nicely used here, but what about the HDR color formats?! Seems like a good opportunity to set up P3 colors and non-P3 color fallbacks. I don’t think this fact is lost on Alexey, as they have lots more color experiments they have built. For example, this visualizer for looking at color models, which then it looks like got an upgrade to visualize more models (and gamuts).
I like looking at those things as they are a reminder of just how designed these color spaces are and how deep the rabbit hole can go. Before you know it, you’re designing extremely sophisticated accessible color palette generation tools.
Looking at these one-off single-purpose websites always puts me in the mood to share more. Aren’t you lucky that I save links to new ones that I see just for times like this.
CSS-Pattern
Temani Afif’s pattern site has some pretty sophisticated backgrounds that are done just with CSS backgrounds. Reminds me of Lea’s take on this from years ago. A grand tradition of CSS wizards.
SpaceBadgers
Those little badge graphics that are super common at the top of GitHub repos, created with a super clean URL format.
Oh and hey they look great small but you can make them as big as you want and because they are SVG they scale up nicely.
Theme Toggles
Need a neat little animated toggle for Light Mode / Dark Mode? This site has a whole bunch of them:
Wasn’t much to pluck one over to a Pen, in case you need a reference there. I saw a little controversy on this as one of the usage options is as a <div>, which of course is not an interactive element. I’m not sure that’s fair, as you might use this as a visual adornment next to an interactive button, for example. And the React exports use <button> nicely.
Tree
I’m sorry I can’t explain it, but sometimes you have to update intended text to have a bunch of extra special ASCII characters that better represent a file tree.
Custom Shape Dividers
In the rectangular world of web design, sometimes just what you need is something… not rectangular.
The site provides SVG, HTML, and CSS for you to copy out, which, I’m sure you’re aware, plunking over to CodePen to play with is a snap. Gosh, isn’t CodePen useful? You should go PRO.
Source link
