Hacker News Reader

Comment by metallicss | Hacker News Reader

Great work! I have been looking for an excuse to try out Krita. This just might be it. Shameless plug: I am also a sucker for metallic aesthetics, and I made this FOSS library to enable realistic metal textures on the web (for buttons, cards, input elements, etc.): https://www.metallicss.com

View on HN

Very nice, I approve of anything that goes against the Material Design hegemony.

One question though: there's a (relatively) large delay updating the demo when I change the convexity. Is this something that comes from the update script or is the effect itself slow? Because I don't think I've ever seen a CSS effect that takes a half second to update before.

There are a lot of canvas in there, I doubt CSS is involved much in drawing this effect.

I checked out the source, there's only a single canvas being used to render a base64 PNG. The PNG is just a 400x400 spherical reflection map, which is basically a required component of any metallic effect. I don't think that would cause a slowdown.

Very cool! It'd be fun to use the webcam to create live reflections.

A very long time ago in the 90s I spent far too long creating gradients to make buttons in a software UI match those in the physical control panel. This was for a video editing research project. Both metallic and rubber buttons were used, and I wish I'd kept a screenshot somewhere, but NDAs and suchlike mean it has disappeared from the world.

This looks great, it'd be so nice to be able to just define buttons rather than painstakingly drawing them out (thank you for making it, and thanks for the nostalgia trip!)

When I get around to making my website I will now be able to create a big, shiny, beautiful gold "Download Here" button!! thank you so much for sharing \╭◜◝ ᵕ ◜◝╮/

wow, that's amazing! I'm gobsmacked you can make something like this with CSS, that is so cool

Not just CSS, it's used to set parameters but looks like the actual rendering is done in a <canvas> element controlled by JS.

My apologies Kroltan, I accidentally replied to the wrong comment earlier! It's a shame the project disapeared I would have loved to have seen that :D

Rubber is a hard thing to get right imo, I was trying to paint it for one of the brush thumbnails of a rubber stamp (https://www.mediafire.com/view/46tten5kkzh2i99/Stamp_Diamond...) - and it was really difficult, I still don't think I got it quite right xD So I can't imagine how tough it would have been to try and create that texture using only CSS and JS back then

Reply on news.ycombinator.com