Show HN: Versatile Metallic Finish for CSS | Hacker News Reader

Show HN: Versatile Metallic Finish for CSS

metallicss.com

112 pointsmikaelaast61 comments

Caused me to find this brushed metallic effect which I think is well done, and is all CSS, no JS.

Simurai is a legend, check out their other code pens for some great level CSS

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.

Jeez, that's so good

that is beautiful!

Wow, that is absurdly good.

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.

Now all it needs is user head tracking to make the highlights and reflections move.

Accelerometer would also work, like in this library: https://github.com/maustinstar/shiny

Now THAT's really cool.

Yes that is to be expected. JS only gets involved in setting of CSS styles, not effecting appearance itself.

You would be surprised how many of these type of things are written in a way that they don't work at all without JS.

I might be old but i think this button style is incomplete without a corresponding Java Applet

Me in my 90s just called me and claimed copyright on this kind of buttons.

reminds me of Xara 3D

I remember when animated GIFs killed client-side Java ;-)

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.

Very fun in a maximalist way!

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 again. I couldn't get this out of my head, so I went to some steps to mitigate the unrealism. Updated now, with a slightly less wobbly horizon.

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.

> using the webcam to capture

I’m just imagining the dialogue boxes asking for permission to use the camera to show me a button.

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.

[0] - https://hypercritical.co/switchglass/

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.

Do it!!! And face recognition to grab the viewer's position so you know how to render the reflections

Naturally, this exists: https://www.youtube.com/watch?v=36fwRWryD64

Naturally, it didn't catch on ;)

A similar thing was done in iOS 6 with brushed metal reflecting based on the gyrosensor: https://www.youtube.com/shorts/c9X7D87uJ7Q

This is neat! and actually very useful!

My client wants a "Bronze, Silver, and Gold" button to represent membership levels, and this will be perfect!

Thank you! This kind of comment makes it worth it.

Doesn't work in Netscape Navigator 3 Gold. :/

Having flashbacks to being a middle schooler choosing the fancy button to use from a menu in Expression Web.

In case the reference is too niche: https://www.expression-web-tutorials.com/interactive-buttons...

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.

1997 personal page navigation buttons called.

The 90s demoscene called...

Today’s 13 yo wear these ridiculous clothes from the 90s. Wait till the old internet becomes cool again.

Seeing how stupid they look makes me realize how stupid I looked. If the web goes through the same retrofit, I’ll stop using it until the fad fades.

Relevant in a way I didn’t appreciate when I read this as a late teen:

https://www.theonion.com/u-s-dept-of-retro-warns-we-may-be-r...

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.

Where is the rule that people need to complain about JavaScript at least once for every post?

Under the rule that identifies meta discussions are inevitable regarding no JS posts ;-)

Where is the rule that people need to complain about JavaScript at least once for every post?

It's there, but you can't see it because the rule requires JavaScript to view the rule.

I believe that the rule is WOULD PROBABLY according to RFC 6919 [1] but it MIGHT be MAY WISH TO?

[1] https://www.rfc-editor.org/rfc/rfc6919#section-5

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.

Considering it's distributed as a JS library I'm gonna go out on a limb here and say it requires javascript.

OP here. Never change, Hacker News. Never change. <3

It's great: I increase 'scale' and I instantly feel richer.

I, for one, welcome this de-Applefication of design that’s been happening - on the edges of the internet, at least.

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

Back to 2000? I don't remember why we wanted that in first place. Please noo

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.

Probably. As with pixel art or design that mimics the early WWW era, it will become part of some retro hype cycle.

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.

Plox add Titanium to the drop-down list of presets.

Ugh. Flashbacks to mid-90s Photoshop tutorials.

Sorry!

It's ok. Maybe I'm just not getting the retro charm. I'm still not sure I get vaporwave either.

Looks pretty neat. Always blown away by what people can do with CSS. Meanwhile I have to look up how to center a div vertically

I didn’t know this was what I needed until I saw it. All my buttons will be like this from now.

Windows Vista is calling.

Aero not going to pick up?

Finally: The Real Web 3.0

Reply on news.ycombinator.com