14 ms·
Show HN: Versatile Metallic Finish for CSS
- prox 4y agoThis 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.
- frb 4y agoProbably. As with pixel art or design that mimics the early WWW era, it will become part of some retro hype cycle.
- smcl 4y agoI 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.
- toastal 4y agoYou'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.
- schwartzworld 4y agoWhere is the rule that people need to complain about JavaScript at least once for every post?
- tomrod 4y agoUnder the rule that identifies meta discussions are inevitable regarding no JS posts ;-)
- reaperducer 4y agoWhere 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.
- 9wzYQbTYsAIc 4y agoI 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 https://www.rfc-editor.org/rfc/rfc6919#section-5
- dylan604 4y agoBut 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.
- toastal 4y agoIt'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.
- vultour 4y agoConsidering it's distributed as a JS library I'm gonna go out on a limb here and say it requires javascript.
- mikaelaast 4y agoOP here. Never change, Hacker News. Never change. <3
- snshn 4y agoPlox add Titanium to the drop-down list of presets.
- skrebbel 4y agoI might be old but i think this button style is incomplete without a corresponding Java Applet
- thatwasunusual 4y agoMe in my 90s just called me and claimed copyright on this kind of buttons.
- ToJans 4y agoThe 90s demoscene called...
- f6v 4y agoToday’s 13 yo wear these ridiculous clothes from the 90s. Wait till the old internet becomes cool again.
- alsetmusic 4y agoSeeing 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-running-out-of-pas-1819564513 https://www.theonion.com/u-s-dept-of-retro-warns-we-may-be-r...
- tyingq 4y agoCaused 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 https://codepen.io/simurai/pen/kvyEeg
- agos 4y agoSimurai is a legend, check out their other code pens for some great level CSS
- autoexec 4y agoThere'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.
- xmonkee 4y agoJeez, that's so good
- cbeach 4y agothat is beautiful!
- crazygringo 4y agoWow, 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.
- globalise83 4y agoIt's great: I increase 'scale' and I instantly feel richer.
- BaudouinVH 4y ago1997 personal page navigation buttons called.
- cm42 4y agoFinally: The Real Web 3.0
- mikaelaast 4y agoOP 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.
- crazygringo 4y agoVery 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!
- mikaelaast 4y agoThank 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.
- mikaelaast 4y agoOP 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.
- v3ss0n 4y agoBack to 2000? I don't remember why we wanted that in first place. Please noo
- maidul 4y agoLooks pretty neat. Always blown away by what people can do with CSS. Meanwhile I have to look up how to center a div vertically
- jawngee 4y agoDoesn't work in Netscape Navigator 3 Gold. :/
- n8cpdx 4y agoHaving 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.html 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.
- plusminusplus 4y agoThe 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)
- mikaelaast 4y agoThanks 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.
- gampleman 4y agoI'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.
- lostlogin 4y ago> using the webcam to capture I’m just imagining the dialogue boxes asking for permission to use the camera to show me a button.
- yreg 4y agoReminds 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/ https://hypercritical.co/switchglass/
- mikaelaast 4y agoOP 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.
- matheist 4y agoDo it!!! And face recognition to grab the viewer's position so you know how to render the reflections
- SebastianKra 4y agoNaturally, this exists: https://www.youtube.com/watch?v=36fwRWryD64 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 https://www.youtube.com/shorts/c9X7D87uJ7Q
- spaceman_2020 4y agoI, for one, welcome this de-Applefication of design that’s been happening - on the edges of the internet, at least.
- LordDragonfang 4y agoI 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.
- spaceman_2020 4y agoTrue, 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
- Aeolun 4y agoI didn’t know this was what I needed until I saw it. All my buttons will be like this from now.
- freedomben 4y agoThis is neat! and actually very useful! My client wants a "Bronze, Silver, and Gold" button to represent membership levels, and this will be perfect!
- mikaelaast 4y agoThank you! This kind of comment makes it worth it.
- durnygbur 4y agoWindows Vista is calling.
- mikaelaast 4y agoAero not going to pick up?
- andybak 4y agoUgh. Flashbacks to mid-90s Photoshop tutorials.
- mikaelaast 4y agoSorry!
- andybak 4y agoIt's ok. Maybe I'm just not getting the retro charm. I'm still not sure I get vaporwave either.