Shader-like holographic effects with CSS

#1

Post by skilled » Thu, Jul 07, 2022, 4:53 PM UTC

Shader-like holographic effects with CSS
robbowen.digital

Re: Shader-like holographic effects with CSS

#2

Post by rchaud » Thu, Jul 07, 2022, 5:42 PM UTC

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

Re: Shader-like holographic effects with CSS

#3

Post by _the_inflator » Thu, Jul 07, 2022, 5:45 PM UTC

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

Re: Shader-like holographic effects with CSS

#4

Post by MrLeap » Thu, Jul 07, 2022, 6:22 PM UTC

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

Re: Shader-like holographic effects with CSS

#5

Post by dylan604 » Thu, Jul 07, 2022, 6:27 PM UTC

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.

Re: Shader-like holographic effects with CSS

#6

Post by mirekrusin » Thu, Jul 07, 2022, 6:54 PM UTC

Really nice.

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

Re: Shader-like holographic effects with CSS

#7

Post by synu » Thu, Jul 07, 2022, 7:08 PM UTC

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

Re: Shader-like holographic effects with CSS

#8

Post by fio_ini » Thu, Jul 07, 2022, 7:10 PM UTC

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

Re: Shader-like holographic effects with CSS

#9

Post by eminence32 » Thu, Jul 07, 2022, 7:10 PM UTC

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

Re: Shader-like holographic effects with CSS

#10

Post by a-walker » Thu, Jul 07, 2022, 7:11 PM UTC

That hologram looks real.