正在加载视频...

视频加载失败

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

135,748 次观看 • 4 个月前 •via X (Twitter)

15 条评论

Joan Verhulst 的头像
Joan Verhulst4 个月前

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

Tyler Nickerson 的头像
Tyler Nickerson4 个月前

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 ʕ•ᴥ•ʔ 的头像
jhey ʕ•ᴥ•ʔ4 个月前

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 的头像
Ankur4 个月前

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

jhey ʕ•ᴥ•ʔ 的头像
jhey ʕ•ᴥ•ʔ4 个月前

@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 的头像
Andrew Rowley4 个月前

Dropping the codepen on this? 👀

Fredrik Tibbling 的头像
Fredrik Tibbling4 个月前

Insane!

senik🎈 的头像
senik🎈4 个月前

Your lightning is so good & practical!

oluwasefunmi. 的头像
oluwasefunmi.4 个月前

wait wait wait wait wait wait wait. what?

Matias Baldanza 的头像
Matias Baldanza4 个月前

🔥🔥🔥

Kathleen McMahon 的头像
Kathleen McMahon4 个月前

😍

Jordan Dingle 的头像
Jordan Dingle4 个月前

Sick

Danny Williams 的头像
Danny Williams4 个月前

you sir are a magician

Rafael Sánchez 的头像
Rafael Sánchez4 个月前

This one's mind-blowing man

Chuks Gabriel 的头像
Chuks Gabriel4 个月前

CSS beast, 🎩 ⬆️

相关视频