[HN Gopher] Show HN: I made a library that adds a metallic look ...
___________________________________________________________________
Show HN: I made a library that adds a metallic look to anything you
throw at it
Author : mikaelaast
Score : 19 points
Date : 2023-02-08 12:29 UTC (10 hours ago)
(HTM) web link (www.metalmorphism.com)
(TXT) w3m dump (www.metalmorphism.com)
| [deleted]
| metalmorphism wrote:
| OP here!
|
| 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.
| jmholla wrote:
| 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).
| Permik wrote:
| The next logical step is generating dynamic reflections via
| MediaDevices API (Webcam), right? :D
| lioeters wrote:
| 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.
| metalmorphism wrote:
| Thanks for the feedback! As soon as Houdini is ready in more
| browsers, I'll be sure to port the thing to CSS.
| jdlyga wrote:
| This is so ridiculously cool. I do miss shiny UI's from the
| 2000s. We've gotten a little bit too professional.
| metalmorphism wrote:
| Thanks a bunch! And I totally agree!
| navhc wrote:
| Doesn't seem to work well in Firefox, the effect is very
| different from the sample images and the text is borderline
| unreadable
| metalmorphism wrote:
| Weird. I've tested it with Firefox (on Windows and Mac OS).
| What OS are you on?
| marssaxman wrote:
| Working fine for me using Firefox 109 on Ubuntu 22.04.
___________________________________________________________________
(page generated 2023-02-08 23:03 UTC)