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!
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.
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.
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
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
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 ;-)
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.
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).
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
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.
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.
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.
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.
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.
Having said that, it is an excellent use of it - well applied, and the explanation is solid!