DEV Community

Adam Crockett 🌀
Adam Crockett 🌀

Posted on

🕵️‍♀️ Train Googles #2: CSS shaders

Another day done and time for some investigation. Like always I have a very limited time in the train to show you something useful.

In 2015 Adobe engineers started working on CSS shaders or custom filters as they are also known. I have searched the web for tutorials and info on this fascinating technology, all I could find was hype from that year, feature flags and not much else.

I almost gave up hope, I clicked this https://experiments.hertzen.com/css-shaders/ Google link and found a technical expose, probably some premature explaination, or so I thought. If you open the samples atleast in mobile chrome, the div distorts! And text is selectable. Meaning it works. When the heck did this drop?! My god I have so much coding to do!

You might think, this is useless what can I do with that. Cast your mind back to the mac os download gienie effect. That was composited. The fact that you can animate this effect means some unreal 2d UI effects far beyond anything we have seen before, but the caveat, you need to learn glsl a simple C like language.

Fantastic video here: https://developers.google.com/web/updates/2013/03/Introduction-to-Custom-Filters-aka-CSS-Shaders

Top comments (0)