It's kind of cool. But I don't like the results. Doesn't look nice, or fancy. Just odd.
Shader-like holographic effects with CSS
21–30 of 62 posts
Re: Shader-like holographic effects with CSS
#22It'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.
Re: Shader-like holographic effects with CSS
#23Does this not work on mobile? I don’t seem to be seeing it on iOS Chrome.
Well, this explains why I couldn't understand why you wouldn't just do it in photoshop.
Re: Shader-like holographic effects with CSS
#24I 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...
You can't.
What if your mask/specular layers were made of an SVG that you then animate the colors within to "cycle"?
Re: Shader-like holographic effects with CSS
#25It's kind of cool. But I don't like the results. Doesn't look nice, or fancy. Just odd.
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.
Re: Shader-like holographic effects with CSS
#26Dude this guy is a god at CSS. Wow thanks for the tips and tricks!
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.
Re: Shader-like holographic effects with CSS
#27Earlier quoted context omitted.
Seems like the answer should be yes https://caniuse.com/?search=blend-mode 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.
No post body was provided.
Re: Shader-like holographic effects with CSS
#28I 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-...
Re: Shader-like holographic effects with CSS
#29Does this not work on mobile? I don’t seem to be seeing it on iOS Chrome.
Another Safari fail.
Re: Shader-like holographic effects with CSS
#30Damn, 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