Metallic CSS
Dev tools
css library
SHOW HN2022
How HN took it
8 positive, 8 neutral or asking, 0 mixed, 12 critical, out of 28 comments about the project. Thread score -0.16.
Design: 5 for, 6 againstExecution: 0 for, 4 againstIdea: 3 for, 0 againstDocs: 0 for, 1 againstPrivacy: 0 for, 1 against
The thread, comment by comment
Each row is a top-level comment and its replies, in HN's order. Select a cell to open that comment on HN.
positive neutral or mixed critical about another commenter or something else the maker
What HN said
What people liked
Looks beautiful and clever, especially the gradient-based brushed metal effect
From 4 comments
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…
crazygringo on HNthat is beautiful!
cbeach on HNJeez, that's so good
xmonkee on HNCaused me to find this brushed metallic effect which I think is well done, and is all CSS, no JS. https://codepen.io/simurai/pen/kvyEeg
tyingq on HN
Useful for button styling like membership tiers
From 1 comment
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!
freedomben on HN
Objections
Demo requires JavaScript and fails without it
From 3 comments
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…
toastal on HNThere'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.
autoexec on HNIt'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…
toastal on HN
Reflection ripple on edges is physically implausible
From 1 comment
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…
crazygringo on HN
Retro look feels dated, like Windows Vista or 90s web
From 3 comments
Windows Vista is calling.
durnygbur on HN1997 personal page navigation buttons called.
BaudouinVH on HNThe 90s demoscene called...
ToJans on HN
Requests
Metallic texture that reflects the environment or uses webcam or head tracking
From 2 comments
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…
gampleman on HNNow all it needs is user head tracking to make the highlights and reflections move.
rbanffy on HN
Add a titanium preset
From 1 comment
Plox add Titanium to the drop-down list of presets.
snshn on HN
Questions
Why is it called CSS when it relies on JavaScript
From 1 comment
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…
dylan604 on HN
Alternatives named
Brushed metal CodePen by simurai
From 1 comment
Caused me to find this brushed metallic effect which I think is well done, and is all CSS, no JS. https://codepen.io/simurai/pen/kvyEeg
tyingq on HN
Shiny accelerometer JS library
From 1 comment
Accelerometer would also work, like in this library: https://github.com/maustinstar/shiny
yreg on HN