Does this not work on mobile? I don’t seem to be seeing it on iOS Chrome.
Runs fine on Firefox.
Shader-like holographic effects with CSS
31–40 of 62 posts
Re: Shader-like holographic effects with CSS
#32Not 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!
Re: Shader-like holographic effects with CSS
#33Does 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.
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).
Re: Shader-like holographic effects with CSS
#34Could this be implemented with ::before and ::after pseudo elements on a parent element?
Re: Shader-like holographic effects with CSS
#35Earlier quoted context omitted.
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.
Re: Shader-like holographic effects with CSS
#36Not 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!
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.
Re: Shader-like holographic effects with CSS
#37Earlier quoted context omitted.
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
Re: Shader-like holographic effects with CSS
#38Earlier quoted context omitted.
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?
Re: Shader-like holographic effects with CSS
#39Does this not work on mobile? I don’t seem to be seeing it on iOS Chrome.
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
Re: Shader-like holographic effects with CSS
#40Would have been a nice combo with device orientation, but alas, that's now considered a security hazard.