Shader-like holographic effects with CSS

https://robbowen.digital/wrote-about/css-blend-mode-shaders/

by skilled • 4 years ago

482 54 4 years ago

rchaud2• 4 years ago

Useful article, the visual examples help a lot. As the author says "why should JS have all the fun?"

This 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• 4 years ago

It's a shame filter: custom() died. It would be easier to skip shader-like and just go right to shader.

dylan6046• 4 years ago

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.

mirekrusin• 4 years ago

Really nice.

ps. we'll surely wake up tomorrow to holographically-authentic-NFTs all over the place!

synu• 4 years ago

Does this not work on mobile? I don’t seem to be seeing it on iOS Chrome.

camjohnson26• 4 years ago

It’s basically only visible when scrolling, and yeah I don’t see the effect on mobile.

bawolff2• 4 years ago

Seems like the answer should be yes https://caniuse.com/?search=blend-mode

I can confirm it works on android

Uehreka• 4 years ago

From 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.

tedunangst• 4 years ago

Well, this explains why I couldn't understand why you wouldn't just do it in photoshop.

theandrewbailey2• 4 years ago

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).

soperj• 4 years ago

Another Safari fail.

beebeepka2• 4 years ago

Runs fine on Firefox.

brundolf• 4 years ago

It works for me on regular iOS Safari. The effect is subtle in some of them; easier to see on the ones you can toggle yourself

sexy_seedbox• 4 years ago

Works fine on Kiwi Browser.

ThomW• 4 years ago

I didn't see it on my iPhone's iOS Safari either. :/

cercatrova• 4 years ago

That's because iOS browsers are just a reskin of Safari, and Safari does not support multiple background-blend-modes.

totetsu• 4 years ago

If you could link that holographic sticker effect to mobile tilt input that would be neat.

Baloo• 4 years ago

You can definitely link it to gyroscope

fio_ini• 4 years ago

Dude this guy is a god at CSS. Wow thanks for the tips and tricks!

dylan6046• 4 years ago

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.

eminence32• 4 years ago

This is neat, and it makes me more fully realize how complicated modern CSS engines must be!

a-walker• 4 years ago

That hologram looks real.

junon• 4 years ago

Wow, the rare new CSS trick that actually looks really nice. Bravo.

bawolff2• 4 years ago

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.

[1] https://meyerweb.com/eric/css/edge/complexspiral/glassy.html

samstave• 4 years ago

This 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• 4 years ago

I 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_C...

aaaaaaaaaaab5• 4 years ago

You can't.

dylan6046• 4 years ago

What if your mask/specular layers were made of an SVG that you then animate the colors within to "cycle"?

thecloud• 4 years ago

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

[0] https://redstapler.co/realistic-water-effect-svg-turbulence-...

aaaaaaaaaaab5• 4 years ago

Someone discovered CSS blend modes!

spartanatreyu• 4 years ago

Blend 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• 4 years ago

The simple gradients used give it an "artificial" or "color-overexposed" look.

Check out perceptually uniform color maps:

https://colorcet.com/

andix• 4 years ago

It's kind of cool. But I don't like the results. Doesn't look nice, or fancy. Just odd.

dylan6046• 4 years ago

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.

rchaud2• 4 years ago

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.

beebeepka2• 4 years ago

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

gilbetron• 4 years ago

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!

gfxgirl• 4 years ago

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.

monocasa• 4 years ago

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.

theandrewbailey2• 4 years ago

Could this be implemented with ::before and ::after pseudo elements on a parent element?

etaioinshrdlu2• 4 years ago

Would have been a nice combo with device orientation, but alas, that's now considered a security hazard.

dumpsterdiver• 4 years ago

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.

etaioinshrdlu2• 4 years ago

Could read here for more: https://www.wired.com/story/mobile-websites-can-tap-into-you...

At one point, this was available by default, but no longer.

mkdirpepper• 4 years ago

Does rendering this type of stuff drain the battery on mobile devices as the processor attempts to render all this?

rendall• 4 years ago

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.

ZeroGravitas• 4 years ago

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.

unraveller• 4 years ago

Remove 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')})()

Shader-like holographic effects with CSS

Related Stories