[HN Gopher] Shader-like holographic effects with CSS
___________________________________________________________________
Shader-like holographic effects with CSS
Author : skilled
Score : 306 points
Date : 2022-07-07 16:53 UTC (6 hours ago)
(HTM) web link (robbowen.digital)
(TXT) w3m dump (robbowen.digital)
| samstave wrote:
| This is FN awesome.
|
| Ill never have use, but I can't wait to see this in the wild.
|
| One thought: FORCE any site that uses this to not be behind a
| cookie paywall ;-)
| synu wrote:
| Does this not work on mobile? I don't seem to be seeing it on iOS
| Chrome.
| soperj wrote:
| Another Safari fail.
| camjohnson26 wrote:
| It's basically only visible when scrolling, and yeah I don't
| see the effect on mobile.
| bawolff wrote:
| Seems like the answer should be yes
| https://caniuse.com/?search=blend-mode
|
| I can confirm it works on android
| Uehreka wrote:
| From the known issues tab:
|
| > iOS Safari is reported to not support multiple background-
| blend-modes
|
| Since iOS Chrome is really just an iOS Safari webview, that
| means it won't work there either.
| trafficante wrote:
| beebeepka wrote:
| Runs fine on Firefox.
| tedunangst wrote:
| Well, this explains why I couldn't understand why you wouldn't
| just do it in photoshop.
| theandrewbailey wrote:
| Yeah, not having the right browser would make it more...
| static.
|
| If you did it in photoshop, you can't alter the image based
| on where it is in the viewport. Doing it in this CSS way, the
| image subtly changes as it scrolls past (particularly the
| bloom to the right covering someone's head).
| paulsmith wrote:
| I wonder if you could use this to achieve an animation effect
| like some 8- and 16-bit games did with color cycling. eg
| http://www.effectgames.com/effect/article-Old_School_Color_C...
| aaaaaaaaaaab wrote:
| You can't.
| dylan604 wrote:
| What if your mask/specular layers were made of an SVG that
| you then animate the colors within to "cycle"?
| aaaaaaaaaaab wrote:
| Color cycling works with paletted images. CSS blending
| modes work in RGB with a limited set of blend functions.
| The closest thing to color cycling is "filter: hue-
| rotate(...)", but you can't limit the colors to a
| particular subset of the hue wheel, so it's gonna be
| useless.
| dylan604 wrote:
| Right, but the colors within the SVG are what is cycling.
| It's not a rasterized image, so you could create a "pixel
| map". I'm not saying it's not convoluted as hell, but the
| effect [w|c]ould look paletted
| aaaaaaaaaaab wrote:
| At that point what's the purpose of having a mask image +
| blending at all?
| thecloud wrote:
| not exactly color cycling per se, but you might be able to
| achieve a similar animation effect by overlaying an svg
| turbulence filter over a mask of the waterfall, like described
| here[0]
|
| unfortunately the dynamic displacement mapping is not very
| performant and this technique is hard to pull off on mobile
| devices
|
| [0] https://redstapler.co/realistic-water-effect-svg-
| turbulence-...
| andix wrote:
| It's kind of cool. But I don't like the results. Doesn't look
| nice, or fancy. Just odd.
| dylan604 wrote:
| We all like different things. The thing that impresses me is
| getting the result out of CSS only. Now it is out there and
| potentially other people can now take the idea and run with it
| to potentially make even more interesting ideas. These are just
| proof of concepts to get the imagination running on the
| potential of being possible.
| rchaud wrote:
| The article is still very helpful esp. if you've tried to use
| mix-blend-mode before to tint photos like how Photoshop does
| pretty easily. To have this ability in CSS is a big leap
| forward.
| fio_ini wrote:
| Dude this guy is a god at CSS. Wow thanks for the tips and
| tricks!
| dylan604 wrote:
| And I still have issues getting layouts to flow correctly, and
| then this person comes along and does this type of stuff.
| Seriously impressive CSS knowledge this one has.
| eminence32 wrote:
| This is neat, and it makes me more fully realize how complicated
| modern CSS engines must be!
| a-walker wrote:
| That hologram looks real.
| MrLeap wrote:
| It's a shame filter: custom() died. It would be easier to skip
| shader-like and just go right to shader.
| rchaud wrote:
| Useful article, the visual examples help a lot. As the author
| says "why should JS have all the fun?"
| theandrewbailey wrote:
| Could this be implemented with ::before and ::after pseudo
| elements on a parent element?
| beebeepka wrote:
| Damn, this can't be upvoted enough. I almost never say this but
| what an awesome read. Good job, whoever you are.
|
| CSS doesn't get enough recognition but it really is a very
| powerful tool. Yes, performance is an issue but running canvas at
| 60 FPS isn't exactly cheap either. Fans will be spun
| mirekrusin wrote:
| Really nice.
|
| ps. we'll surely wake up tomorrow to holographically-authentic-
| NFTs all over the place!
| gilbetron wrote:
| Not anything like a shader, really, just standard non-shader
| masking and blending. (I mean, you can implement them in a
| shader, but that's besides the point). Nothing standard fixed
| pipelines haven't been doing for ages.
|
| Having said that, it is an excellent use of it - well applied,
| and the explanation is solid!
| gfxgirl wrote:
| agreed and honestly really annoying when the wrong terms are
| used and then you need to invent new words to distinguish the
| actual thing "shaders" from layering effects.
| dylan604 wrote:
| For once, something I'm actually more than impressed by the
| overall effect. I love the fact that someone was familiar enough
| with all of the abilities of CSS plus other effects to be able to
| pull it off in the confines of CSS.
| _the_inflator wrote:
| This is a very in-depth and thorough article and fun to play with
| the techniques mentioned. Some view modes however, are best
| viewed with LSD... ;)
| aaaaaaaaaaab wrote:
| Someone discovered CSS blend modes!
| danuker wrote:
| The simple gradients used give it an "artificial" or "color-
| overexposed" look.
|
| Check out perceptually uniform color maps:
|
| https://colorcet.com/
| junon wrote:
| Wow, the rare new CSS trick that actually looks really nice.
| Bravo.
| bawolff wrote:
| This made me nostalgic for that css/edge demo from back in the
| day [1]. This demo seems like a similar idea as the css/edge demo
| just taken much further.
|
| [1] https://meyerweb.com/eric/css/edge/complexspiral/glassy.html
___________________________________________________________________
(page generated 2022-07-07 23:00 UTC)