Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

product spotlight cards 🔦 w/ depth map lighting + css scroll tricks

135,748 Aufrufe • vor 4 Monaten •via X (Twitter)

15 Kommentare

Profilbild von Joan Verhulst
Joan Verhulstvor 4 Monaten

recently i tried to achieve a similar effect with photoshop and luminosity masks but this seems way more practical

Profilbild von Tyler Nickerson
Tyler Nickersonvor 4 Monaten

This is the second post I’ve seen about depth maps! Is that a built in CSS thing now or some sort of WebGL magic?

Profilbild von jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔvor 4 Monaten

this one's proper depth map usage with a shader 🤙 you can do a similar thing with svg filters and lighting but... that has limited legs outside of chrome for performance if you start transitioning the filters too much, etc. (webgl doesn't hit that)

Profilbild von Ankur
Ankurvor 4 Monaten

@TylerNickerson @jh3yy how would the depth map look like for this ?

Profilbild von jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔvor 4 Monaten

@TylerNickerson the fun part here is that you can chain the svg filter so you don't need to create a separate depth map as we're just working with the sticker outline 🤙 you could generate a depth map though with a model

Profilbild von Andrew Rowley
Andrew Rowleyvor 4 Monaten

Dropping the codepen on this? 👀

Profilbild von Fredrik Tibbling
Fredrik Tibblingvor 4 Monaten

Insane!

Profilbild von senik🎈
senik🎈vor 4 Monaten

Your lightning is so good & practical!

Profilbild von oluwasefunmi.
oluwasefunmi.vor 4 Monaten

wait wait wait wait wait wait wait. what?

Profilbild von Matias Baldanza
Matias Baldanzavor 4 Monaten

🔥🔥🔥

Profilbild von Kathleen McMahon
Kathleen McMahonvor 4 Monaten

😍

Profilbild von Jordan Dingle
Jordan Dinglevor 4 Monaten

Sick

Profilbild von Danny Williams
Danny Williamsvor 4 Monaten

you sir are a magician

Profilbild von Rafael Sánchez
Rafael Sánchezvor 4 Monaten

This one's mind-blowing man

Profilbild von Chuks Gabriel
Chuks Gabrielvor 4 Monaten

CSS beast, 🎩 ⬆️

Ähnliche Videos