Загрузка видео...

Не удалось загрузить видео

На главную

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, 🎩 ⬆️

Похожие видео