77 ms·
Shader-like holographic effects with CSS
- rendall 4y agoFor 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.
- rchaud 4y agoUseful article, the visual examples help a lot. As the author says "why should JS have all the fun?"
- _the_inflator 4y agoThis is a very in-depth and thorough article and fun to play with the techniques mentioned. Some view modes however, are best viewed with LSD... ;)
- MrLeap 4y agoIt's a shame filter: custom() died. It would be easier to skip shader-like and just go right to shader.
- dylan604 4y agoFor 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.
- mirekrusin 4y agoReally nice. ps. we'll surely wake up tomorrow to holographically-authentic-NFTs all over the place!
- synu 4y agoDoes this not work on mobile? I don’t seem to be seeing it on iOS Chrome.
- soperj 4y agoAnother Safari fail.
- camjohnson26 4y agoIt’s basically only visible when scrolling, and yeah I don’t see the effect on mobile.
- bawolff 4y agoSeems like the answer should be yes https://caniuse.com/?search=blend-mode https://caniuse.com/?search=blend-mode I can confirm it works on android
- Uehreka 4y agoFrom the known issues tab: > iOS Safari is reported to not support multiple background-blend-modes Since iOS Chrome is really just an iOS Safari webview, that means it won't work there either.
- trafficante 4y ago
- tedunangst 4y agoWell, this explains why I couldn't understand why you wouldn't just do it in photoshop.
- theandrewbailey 4y agoYeah, 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).
- beebeepka 4y agoRuns fine on Firefox.
- fio_ini 4y agoDude this guy is a god at CSS. Wow thanks for the tips and tricks!
- dylan604 4y agoAnd 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.
- eminence32 4y agoThis is neat, and it makes me more fully realize how complicated modern CSS engines must be!
- a-walker 4y agoThat hologram looks real.
- junon 4y agoWow, the rare new CSS trick that actually looks really nice. Bravo.
- bawolff 4y agoThis 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. [1] https://meyerweb.com/eric/css/edge/complexspiral/glassy.html https://meyerweb.com/eric/css/edge/complexspiral/glassy.html
- samstave 4y agoThis is FN awesome. Ill never have use, but I can't wait to see this in the wild. One thought: FORCE any site that uses this to not be behind a cookie paywall ;-)
- paulsmith 4y agoI wonder if you could use this to achieve an animation effect like some 8- and 16-bit games did with color cycling. eg http://www.effectgames.com/effect/article-Old_School_Color_Cycling_with_HTML5.html http://www.effectgames.com/effect/article-Old_School_Color_C...
- aaaaaaaaaaab 4y agoYou can't.
- dylan604 4y agoWhat if your mask/specular layers were made of an SVG that you then animate the colors within to "cycle"?
- aaaaaaaaaaab 4y agoColor 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.
- dylan604 4y agoRight, 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
- aaaaaaaaaaab 4y agoAt that point what's the purpose of having a mask image + blending at all?
- dylan604 4y ago
- aaaaaaaaaaab 4y agoSomeone discovered CSS blend modes!
- spartanatreyu 4y agoBlend modes are usually either boring (e.g. sepia) or used to make something hacky that doesn't have a better solution... But every now and then someone uses blend modes to their fullest potential and I get all fuzzy inside.
- danuker 4y agoThe simple gradients used give it an "artificial" or "color-overexposed" look. Check out perceptually uniform color maps: https://colorcet.com/ https://colorcet.com/
- andix 4y agoIt's kind of cool. But I don't like the results. Doesn't look nice, or fancy. Just odd.
- dylan604 4y agoWe 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.
- rchaud 4y agoThe 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.
- deleted 4y ago[deleted]
- beebeepka 4y agoDamn, 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
- gilbetron 4y agoNot 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!
- gfxgirl 4y agoagreed 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.
- monocasa 4y agoSimple 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.
- deleted 4y ago[deleted]
- theandrewbailey 4y agoCould this be implemented with ::before and ::after pseudo elements on a parent element?
- etaioinshrdlu 4y agoWould have been a nice combo with device orientation, but alas, that's now considered a security hazard.
- dumpsterdiver 4y agoI'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.
- etaioinshrdlu 4y agoCould read here for more: https://www.wired.com/story/mobile-websites-can-tap-into-your-phones-sensors-without-asking/ https://www.wired.com/story/mobile-websites-can-tap-into-you... At one point, this was available by default, but no longer.
- deleted 4y ago[deleted]
- deleted 4y ago[deleted]
- mkdirpepper 4y agoDoes rendering this type of stuff drain the battery on mobile devices as the processor attempts to render all this?
- ZeroGravitas 4y agoI 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.
- unraveller 4y agoRemove Sticky bookmarklet to get rid of the CSS overlays protruding into the beautiful content area. javascript:(function(){ let i, elements = document.querySelectorAll('body *'); for (i = 0; i < elements.length; i++) { if(getComputedStyle(elements[i]).position === 'fixed' || getComputedStyle(elements[i]).position === 'sticky'){ elements[i].parentNode.removeChild(elements[i]); } } window.history.replaceState( {} , document.title, location.href+'#cleaned')})()