3 ms·
Remove Black Color with Shaders
- esperent 11mo agoI thought this was some crazy CSS syntax I've never seen before: background: @shaders( fragment { } vertex { } texture { } ); Searching around just leads back to this blog though [0]. It would be amazing if this was real syntax, but I guess security reasons would probably make it a no-go for general use. Indeed, there was an old CSS Shaders feature (in Chrome, behind a flag) behind from way back around 2013 [1]. Unclear if there's been any development since. [0] https://yuanchuan.dev/add-shaders https://yuanchuan.dev/add-shaders [1] https://developer.chrome.com/blog/introduction-to-custom-filters-aka-css-shaders https://developer.chrome.com/blog/introduction-to-custom-fil...
- anewhnaccount2 11mo agoLooks like it's an extension offered by this https://css-doodle.com/ https://css-doodle.com/
- esperent 11mo agoYeah, good catch. yuanchen.dev is the creator of that, I guess.
- Etheryte 11mo agoHere's hoping this will never come to browsers because this would become an endless pit of fingerprinting loopholes, similar to canvas and other related APIs.
- circuit10 11mo agoI think browsers can already block sites from reading image data from images embedded from other domains so maybe you could use the same logic here Also WebGL/WebGPU do exist already although I guess that’s easier to disable
- scotty79 11mo agoI eagerly await times when random website's CSS can mine crypto on my GPU.
- Barathkanna 11mo agoNice explanation. This is one of those shader tricks that feels obvious once you see it, but saves a ton of asset wrangling in practice. Treating black as a blend signal at render time instead of baking alpha channels is a clean solution, especially for effects, legacy textures, or quick prototyping.
- dleeftink 11mo agoWhy not svg filters to create alpha channels? Seems to be supported by the library too (very useful btw!).
- Zekio 11mo agowouldn't the simplest solution, just be to use transparent instead of black? or in this case #0000 instead of #000
- woolion 11mo agoIt seems the shader transparent version is badly aliased? The effect is less noticeable on Chrome than Firefox, but it is still quite visible. This defeats the purpose of vector graphics... It's a nice trick to play around, but that limits its usefulness.
- maggit 11mo agoIt is indeed badly aliased. The technique demonstrated does not take into account antialiasing in the initial render, which causes this issue. There are ways to improve it, but I would advise against this approach in general since it doesn't handle these edge cases well.
- ImHereToVote 11mo agoIf you are gonna use shaders. Why not create the whole boxes as meshes? Why bother with the CSS at all?
- ZachSaucier 11mo agoThe author creates art using their own custom library that uses CSS-like syntax to render HTML, SVG, and more recently shaders. The point isn't that this is the best way to do it. It's simply a trick that the author used to do something with their own bespoke library that they were trying to do.
- meindnoch 11mo agoI sincerely hope this is not a real CSS feature.
- nnevatie 11mo agoWe have come a full circle with a re-invention of luma keying, originally from the 1950s, or so.
- butlike 11mo agoI want to point out as an out-of-touch early 2010s front-end dev that CSS has comically gotten away from me, exemplified by: vec2 uv = gl_FragCoord.xy / u_resolution.xy;
- ZachSaucier 11mo agoThat's not CSS, it's GLSL