I never would have imagined you could use a repeating gradient effect to produce a brushed metal texture. That's crazy clever, and it's also crazy how it works equally well for rounded and rectangular buttons.
There's something just plain wrong about showing off some cool trick that doesn't need JS by putting it on a website that refuses to show you anything without it being enabled.
The metallic finish is just an image, "for CSS" made me think this used only CSS to achieve the effect.
The use of `filter` make it look nicer but other than that there's not much original here. Maybe try abusing nested borders, gradients and shadows until you can achieve the same thing with CSS alone. The JS to render the image blob is creative.
Also elements with a fixed height (or `line-height`) get tricky with dynamic content, linebreaks, etc. Maybe find a way around that. (Cool demo, thanks for sharing)
Thanks for the feedback. The "for CSS" is in reference to how CSS properties like the dimensions and border-radius are what determine the rendered effect. Also, there are additional custom CSS properties available to control even more aspects of the final look.
I do have a nitpick though -- I'm always bothered by whenever shadows or reflections operate in a way that makes no physical sense.
And in this case, there's a funny "wobble" of the reflections on the left and right edges. From inside out, the horizon goes way down, then up, then back down again... which suggests an awfully bizarre (and likely physically impossible?) rippling shape around the edges.
Hope this is constructive feedback -- would love to see it without the side wobbles/ripples!
Thank you for the comment. I get it completely. The ripple effect is my artistic and decidedly unrealistic way of evoking the general feeling of the kind of distortion that occurs when the metallic surface bends. It works well for the most part (in my opinion), but starts to call attention to itself when applied too heavily (like what happens when upping the "--scale" value). I am hoping it serves as a simplified and abstracted interpretation of reality.
OP here. Awesome to get some feedback on the library. Please let me know if you are curious about details. The insanely hard part of this was reconciling the differences in SVG implementations across browser engines.
I'm really hoping someone will make a metallic texture that behaves like an actual metallic colour - i.e. reflecting the environment. I think that would require some awareness of surrounding colours as well as using the webcam to capture light coming on the the screen surface.
Reminds me of SwitchGlass[0] preferences. The author talked on his podcast that he really wanted to display user's wallpaper as it currently appears, but he found out that to determine which "frame" of an Apple dynamic wallpaper is shown SwitchGlass would need to ask for location permissions.
OP here. Believe it or not, that was actually exactly my conceptual starting point. Goes without saying that I had to scale back my ambitions just a tiny bit.
Is this the first hint of that style of UI coming back in fashion? It seems possibly overdue with the trend towards rounding, shadowing, and texturing everything the last few years.
You'd hope there would be at least an example that doesn't require JavaScript if this is a CSS thing. It could have made a good <noscript> block to remind you to enable to see the editor.
But in this case, it is a decent question. Why is it not called MetalliJS? It's not CSS so much that you can just open up a CSS file and manipulate it. You have to dive into a JS file to modify CSS? That's not intuitive at all.
It just seems a very strange way of going about demoing a CSS library.
It's about the experience. Having JavaScript is fine, but <noscript> is a part of accessibility. It's just plain broken with no warning when scripts are disabled. It's a wise practice to personally disable scripts by default with an add-on and only opt yourself into scripts as needed--for privacy, for security, saving bandwidth.
In this specific case, one should be able to view the default demo without JS because it's a CSS library/demo and not a JS one. You can (and should) progressively enhance it with JS.
I mean, Apple was one of the first to really embrace and promote skeuomorphic design. It wasn't that long ago that this sort of thing was Apple's design.
True, and I hope they go back to some skeumorphic design elements. But we've had nearly a decade of Apple's current design language. It's time to move on
This reminds me there was a time when affordances were all the rage in UI (early Iphone) and Steve Jobs was a fan, wonder if we get that back at some point.
I think a lot of these trends come in waves, so in time flat UI will hopefully fade away and we'll get slightly chonkier UI elements that are (IMO) a little more discoverable and user-friendly.
https://codepen.io/simurai/pen/kvyEeg