Shader-like holographic effects with CSS(robbowen.digital)
robbowen.digital
Shader-like holographic effects with CSS
https://robbowen.digital/wrote-about/css-blend-mode-shaders/
61 comments
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.
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]
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 simple gradients used give it an "artificial" or "color-overexposed" look.
Check out perceptually uniform color maps:
https://colorcet.com/
Check out perceptually uniform color maps:
https://colorcet.com/
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...
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-...
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-...
You can't.
What if your mask/specular layers were made of an SVG that you then animate the colors within to "cycle"?
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.
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
At that point what's the purpose of having a mask image + blending at all?
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 ;-)
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 ;-)
I don’t really get what you’re saying, but ok.
You can also overlay animated <canvas> elements.
It's kind of cool. But I don't like the results. Doesn't look nice, or fancy. Just odd.
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.
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]
Does this not work on mobile? I don’t seem to be seeing it on iOS Chrome.
Seems like the answer should be yes https://caniuse.com/?search=blend-mode
I can confirm it works on android
I can confirm it works on android
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.
> 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.
It’s basically only visible when scrolling, and yeah I don’t see the effect on mobile.
Well, this explains why I couldn't understand why you wouldn't just do it in photoshop.
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).
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).
Another Safari fail.
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
That's because iOS browsers are just a reskin of Safari, and Safari does not support multiple background-blend-modes.
[deleted]
[deleted]
I didn't see it on my iPhone's iOS Safari either. :/
Works fine on Kiwi Browser.
Runs fine on Firefox.
Wow, the rare new CSS trick that actually looks really nice. Bravo.
It's a shame filter: custom() died. It would be easier to skip shader-like and just go right to shader.
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
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
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.
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.
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
[1] https://meyerweb.com/eric/css/edge/complexspiral/glassy.html
Remove Sticky bookmarklet to get rid of the CSS overlays protruding into the beautiful content area.
javascript:(function(){ let i, elements = document.querySelectorAll('body *'); for (i = 0; i < elements.length; i++) { if(getComputedStyle(elements[i]).position === 'fixed' || getComputedStyle(elements[i]).position === 'sticky'){ elements[i].parentNode.removeChild(elements[i]); } } window.history.replaceState( {} , document.title, location.href+'#cleaned')})()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... ;)
Would have been a nice combo with device orientation, but alas, that's now considered a security hazard.
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.
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.
At one point, this was available by default, but no longer.
[deleted]
[deleted]
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.
This is neat, and it makes me more fully realize how complicated modern CSS engines must be!
Really nice.
ps. we'll surely wake up tomorrow to holographically-authentic-NFTs all over the place!
ps. we'll surely wake up tomorrow to holographically-authentic-NFTs all over the place!
Does rendering this type of stuff drain the battery on mobile devices as the processor attempts to render all this?
Useful article, the visual examples help a lot. As the author says "why should JS have all the fun?"
Someone discovered CSS blend modes!
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.
But every now and then someone uses blend modes to their fullest potential and I get all fuzzy inside.
Could this be implemented with ::before and ::after pseudo elements on a parent element?
That hologram looks real.
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 ;-)
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 ;-)
Having said that, it is an excellent use of it - well applied, and the explanation is solid!