[HN Gopher] Shader-like holographic effects with CSS
___________________________________________________________________
Shader-like holographic effects with CSS
Author : skilled
Score : 452 points
Date : 2022-07-07 16:53 UTC (1 days ago)
(HTM) web link (robbowen.digital)
(TXT) w3m dump (robbowen.digital)
| etaioinshrdlu wrote:
| Would have been a nice combo with device orientation, but alas,
| that's now considered a security hazard.
| dumpsterdiver wrote:
| I'm curious what security hazard you're referring to? Just
| wondering if I missed a news cycle, because I don't recall
| hearing about a security issue in this context.
| etaioinshrdlu wrote:
| Could read here for more: https://www.wired.com/story/mobile-
| websites-can-tap-into-you...
|
| At one point, this was available by default, but no longer.
| [deleted]
| [deleted]
| 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 ;-)
| mkdirpepper wrote:
| Does rendering this type of stuff drain the battery on mobile
| devices as the processor attempts to render all this?
| synu wrote:
| Does this not work on mobile? I don't seem to be seeing it on iOS
| Chrome.
| soperj wrote:
| Another Safari fail.
| sexy_seedbox wrote:
| Works fine on Kiwi Browser.
| ThomW wrote:
| I didn't see it on my iPhone's iOS Safari either. :/
| cercatrova wrote:
| That's because iOS browsers are just a reskin of Safari, and
| Safari does not support multiple background-blend-modes.
| [deleted]
| camjohnson26 wrote:
| It's basically only visible when scrolling, and yeah I don't
| see the effect on mobile.
| [deleted]
| 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).
| brundolf wrote:
| It works for me on regular iOS Safari. The effect is subtle in
| some of them; easier to see on the ones you can toggle yourself
| totetsu wrote:
| If you could link that holographic sticker effect to mobile
| tilt input that would be neat.
| ZeroGravitas wrote:
| I don't think I've ever seen a simple explanation of the mix
| blend modes. Seems most people use them in a trial and error kind
| of way.
|
| Surely one exists as they're a very common tool across Photoshop
| and now web, but is just swamped by the people repeating the
| basic instructions.
|
| Feels like an explanation might need to split between various
| tasks but focus on the fact that you are changing each pixel by
| different amounts. The confusing thing is that the choice of
| which pixel to change, and how to change it, is a combination of
| the source images and the blend mode.
| 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?
| dylan604 wrote:
| because you can now overlay onto other RGB rasterized
| images
|
| The SVG is just the spectral map. We're using its native
| possibilites to pull off some other crazy wild hare of an
| idea to do things that other image compositing programs
| do, but in a browser. I'm way way outside a box here, but
| that's where I prefer to play. This is one of those
| things where I'm taking an idea that someone developed
| with a specific idea, but I'm jerking the wheel hard left
| to suggest something zanny just because it might be
| interesting and cool. Following directions and creator's
| intent is boring ;-)
| aaaaaaaaaaab wrote:
| I don't really get what you're saying, but ok.
| eurasiantiger wrote:
| You can also overlay animated <canvas> elements.
| 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.
| [deleted]
| 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!
| monocasa wrote:
| Simple pixel shaders are pretty much the same thing. PS 1.0
| hardware was the same hardware as register combiners, the
| compiled shader program was simply what got blitted over the
| register combiner config registers. You could absolutely write
| a simplified shader ASM that would compile to these css
| statements.
| 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.
| [deleted]
| 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!
| spartanatreyu wrote:
| Blend modes are usually either boring (e.g. sepia) or used to
| make something hacky that doesn't have a better solution...
|
| But every now and then someone uses blend modes to their
| fullest potential and I get all fuzzy inside.
| rendall wrote:
| For me on both Android mobile and desktop Chrome, the effect is
| there but rather subtle. On desktop it was so subtle that I
| thought it wasn't working, at first. Perhaps screen brightness
| affects it. It is an extremely bright day now, here.
| 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-08 23:02 UTC)