I've been obsessing over creating a high-end and unique metallic look that I feel has been sorely missing from the web. I've put quite a bit of effort into ensuring the implementation is lightweight, performant and cross-browser compatible.
Maybe Metalmorphism can bring a touch of metallic elegance to the web in 2023?
The library I've written to powers all this, called MetalliCSS, lets you turn any HTML element into a metallic looking thing by giving it a certain classname. It generates the SVG code (filters and all) on the fly and renders the raster image to a canvas element that is placed inside the element. The library will respect the dimensions, as well as the background and border-radius properties of the element, using them all as parameters for the effect (even after the first render, if anything changes, dynamically).
I love metallic stuff. I think the aesthetic is timeless and compelling. Seeing something metallic in the world always gives me pause. I remember as a child being fascinated with metallic toys and such, even the cheap plastic stuff with a faux metal coat. When I got into web development, the skeuomorphic design trend was on the rise, and I remember it fondly. I feel like I am on a personal crusade to bring back some of the charm of this bygone era.
Please let me answer any questions you may have about the implementation.
On Firefox with Dark Reader Theme Generation set to Dynamic, the initial page is just a black slate. (The default setting, Filter, inverts the background making it look awful.) I have to scroll down to see anything.
I know that it's my own browser configuration changing your website, but I expect you'll find many users here use Dark Reader. I'm also not sure what you can do about it, but I know that I am personally more amenable to turning it off on websites that provide a dark mode, especially if the CSS automatically respects the color scheme of my device (which is dark).
I think I'm running into the same issue, Windows 11 Firefox 109.0.1. The "ridge" of the reflection effect is stuck to the lower ~10% of the button, and completely dark, and the gold looks distinctly green.
Left is firefox, right is Edge (appearing, I presume, as intended)
Very interesting effect. Not sure how practical it would be, but I like seeing what's possible with CSS. I'd prefer it without request to Google Fonts for the Roboto font, and just use system fonts by default. Also I'm curious what the JavaScript is for - I think people would like it better if it were pure CSS.
This is one of those projects that I question the utility of, but which I think is endlessly cool and a fun demonstration of artistry for art's sake and as a demonstration of love for an idea.
16 comments
[ 6.3 ms ] story [ 48.7 ms ] threadI've been obsessing over creating a high-end and unique metallic look that I feel has been sorely missing from the web. I've put quite a bit of effort into ensuring the implementation is lightweight, performant and cross-browser compatible.
Maybe Metalmorphism can bring a touch of metallic elegance to the web in 2023?
The library I've written to powers all this, called MetalliCSS, lets you turn any HTML element into a metallic looking thing by giving it a certain classname. It generates the SVG code (filters and all) on the fly and renders the raster image to a canvas element that is placed inside the element. The library will respect the dimensions, as well as the background and border-radius properties of the element, using them all as parameters for the effect (even after the first render, if anything changes, dynamically).
I love metallic stuff. I think the aesthetic is timeless and compelling. Seeing something metallic in the world always gives me pause. I remember as a child being fascinated with metallic toys and such, even the cheap plastic stuff with a faux metal coat. When I got into web development, the skeuomorphic design trend was on the rise, and I remember it fondly. I feel like I am on a personal crusade to bring back some of the charm of this bygone era.
Please let me answer any questions you may have about the implementation.
I know that it's my own browser configuration changing your website, but I expect you'll find many users here use Dark Reader. I'm also not sure what you can do about it, but I know that I am personally more amenable to turning it off on websites that provide a dark mode, especially if the CSS automatically respects the color scheme of my device (which is dark).
Left is firefox, right is Edge (appearing, I presume, as intended)
[0] https://snipboard.io/AVU6zh.jpg
But it an all seriousness this is pretty cool. I just wish I had a sue for it.
I love it.