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 (1)

Collapse
 
v_systems profile image
V_Systems

Apply your GLSL skills to the V Shader Hackathon, running until 22 May 2025!
Create unique Shader art to win up to $1000 – in collaboration with Gamedevjs.com

  • Create your original Shader
  • Upload the Javascript to the V Systems blockchain to turn it into an NFT
  • Be one of the 16 winners of prizes ranging $500-$1000

How to join: medium.com/vsystems/13-26-april-cr...

Any questions? Join our community!