Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

135,748 görüntüleme • 4 ay önce •via X (Twitter)

15 Yorum

Joan Verhulst profil fotoğrafı
Joan Verhulst4 ay önce

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

Tyler Nickerson profil fotoğrafı
Tyler Nickerson4 ay önce

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?

jhey ʕ•ᴥ•ʔ profil fotoğrafı
jhey ʕ•ᴥ•ʔ4 ay önce

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)

Ankur profil fotoğrafı
Ankur4 ay önce

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

jhey ʕ•ᴥ•ʔ profil fotoğrafı
jhey ʕ•ᴥ•ʔ4 ay önce

@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

Andrew Rowley profil fotoğrafı
Andrew Rowley4 ay önce

Dropping the codepen on this? 👀

Fredrik Tibbling profil fotoğrafı
Fredrik Tibbling4 ay önce

Insane!

senik🎈 profil fotoğrafı
senik🎈4 ay önce

Your lightning is so good & practical!

oluwasefunmi. profil fotoğrafı
oluwasefunmi.4 ay önce

wait wait wait wait wait wait wait. what?

Matias Baldanza profil fotoğrafı
Matias Baldanza4 ay önce

🔥🔥🔥

Kathleen McMahon profil fotoğrafı
Kathleen McMahon4 ay önce

😍

Jordan Dingle profil fotoğrafı
Jordan Dingle4 ay önce

Sick

Danny Williams profil fotoğrafı
Danny Williams4 ay önce

you sir are a magician

Rafael Sánchez profil fotoğrafı
Rafael Sánchez4 ay önce

This one's mind-blowing man

Chuks Gabriel profil fotoğrafı
Chuks Gabriel4 ay önce

CSS beast, 🎩 ⬆️

Benzer Videolar