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

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

На главную

context-aware css card glow/shine effect 👨‍🍳 the trick: duplicate and scale the icon. translate it on pointermove. apply feGaussianBlur 🤙 check it 👇

842,603 просмотров • 9 месяцев назад •via X (Twitter)

Комментарии: 37

Фото профиля jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔ9 месяцев назад

s/o to @steve_hayes who sniped me in Slack with a prompt that i felt obliged to explore/prototype quick 😁 it's a play on the glow cards we did a year or so back — you can play with all the controls in this @CodePen 🤙

Фото профиля gandan
gandan9 месяцев назад

remember this?

Фото профиля jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔ9 месяцев назад

sure do!

Фото профиля Nikita
Nikita9 месяцев назад

Please share the code to this, this would be so cool in a shadcn registry

Фото профиля Chief Twat
Chief Twat9 месяцев назад

Nice, what about shining thru? :)

Фото профиля Steve Hayes
Steve Hayes9 месяцев назад

Appreciate the work on this, amazing execution 🙌

Фото профиля jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔ9 месяцев назад

appreciate you pinging/sniping me! 🙏 can't resist having a go at putting things like this together 😁 hopefully it helps get this feature in the right direction or stirs another idea for us! 💡

Фото профиля Steve Hayes
Steve Hayes9 месяцев назад

Hoping we can implement some flavor of this when this work ships! I’ll keep ya updated. There was also some interest from another designer for using this pattern in dev docs 👀

Фото профиля jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔ9 месяцев назад

keep me posted 👀 always happy to iterate and riff on other ideas 👨‍🍳

Фото профиля Prince Zoho
Prince Zoho9 месяцев назад

Thanks guys @jh3yy and @steve_hayes for this inspiration. Very fun stuff

Фото профиля dom
dom9 месяцев назад

This is genius. I need to find a reason to use it now!!

Фото профиля OPM
OPM9 месяцев назад

that's genius

Фото профиля David Fernandes
David Fernandes9 месяцев назад

love to see these type of experimental work! amazing @jh3yy 🙌

Фото профиля Mykhailo Sorochuk
Mykhailo Sorochuk9 месяцев назад

Nice effect! Makes the icons pop. Any chance of sharing the code too?

Фото профиля Andrew Krippner
Andrew Krippner9 месяцев назад

this is both beautiful and functional, great work

Фото профиля Mukul
Mukul9 месяцев назад

🤔This glow effect is super cool! The duplicate-and-scale trick is clever for that dynamic feel. Wondering if it could be adapted for a hover effect on cards with images too? 🤔

Фото профиля Yuma Tanaka
Yuma Tanaka9 месяцев назад

@designgurra

Фото профиля Naiza
Naiza9 месяцев назад

so cool effect

Фото профиля Vishal G.
Vishal G.9 месяцев назад

@timvandaats

Фото профиля Amol Kelkar
Amol Kelkar9 месяцев назад

Loved it!

Фото профиля Jon raRaRa
Jon raRaRa9 месяцев назад

What about the border?

Фото профиля Jose
Jose9 месяцев назад

It’s beautiful, I’ll implementing in my next landing

Фото профиля Danny Williams
Danny Williams9 месяцев назад

Brilliant 👌

Фото профиля D-lan
D-lan9 месяцев назад

Wait thats smart af When course drop?

Фото профиля cris
cris9 месяцев назад

looks clean

Фото профиля Dreh
Dreh9 месяцев назад

such a brilliant way of doing this 😁

Фото профиля Keith Harvey
Keith Harvey9 месяцев назад

🤯

Фото профиля Francesco Piccoli
Francesco Piccoli9 месяцев назад

cc @benmoha

Фото профиля Stephen Parker
Stephen Parker9 месяцев назад

Very cool! 🤙

Фото профиля Dhinesh
Dhinesh9 месяцев назад

The effect is magical. And you did reveal it like "The Prestige" movie.

Фото профиля Jordan Dingle
Jordan Dingle9 месяцев назад

Nutty 🤙

Фото профиля César Couto
César Couto9 месяцев назад

Love it.

Фото профиля origami
origami9 месяцев назад

Stealing this

Фото профиля Lúcás
Lúcás9 месяцев назад

Thats really goo, I like it! , Would be interesting on input fields

Фото профиля Theo Vararu
Theo Vararu9 месяцев назад

@Saadeghi you did something similar with hover-3d recently

Фото профиля Josh Johnson
Josh Johnson9 месяцев назад

Geeeeeeeze. That is so dang clever.

Фото профиля stevie
stevie9 месяцев назад

@grok what would the html and css look like to make this

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

CSS Tip! 🤙 You can use mask-composite and some JavaScript to create this pointer proximity following glow border ✨ .glow { mask-composite: intersect; mask-clip: padding-box, border-box; mask: linear-gradient(#0000, #0000), conic-gradient(#0000 0deg, #​fff, #0000 45deg); } The trick is to mask a background-image with a combination of mask layers. mask-composite: intersect; means the mask used will be the intersection of the layers 🔥 use source-in, xor; in browsers that don't support intersect; In this demo, you can use pseudoelements and rely on scoped custom properties to do a lot of the heavy lifting for you 🙌 Once you've masked the background, you need to update the starting angle of the conic-gradient on pointermove 👆 You can work that out by getting the center point of each card and then calculating the angle between that and the pointer with Math.atan2 🤓 let ANGLE = Math.atan2( event?.y - CARD_CENTER[1], event?.x - CARD_CENTER[0] ) * 180 / Math.PI ANGLE = ANGLE < 0 ? ANGLE + 360 : ANGLE; CARD.​style.setProperty('--start', ANGLE + 90) You plug that into your conic-gradient mask as a custom property accounting for --spread ⚡️ conic-gradient(from calc((var(--angle) - (var(--spread) * 0.5)) * 1deg), #000 0deg, #​fff, #0000 calc(var(--spread) * 1deg)); To get the blur, you apply a blur to the glow container on each card 🤙 .glows { filter: blur(calc(var(--blur) * 1px); } That's it! Layers of masks that are clipped and composited before being blurred 😎 The added trick is to fade each one in when the pointer is in the defined proximity of the card. For example, don't show unless within 100px of a card. You can see that in the video. Check out the JavaScript code for that 🫶 Couldn't resist making this one 😁 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

1,180,399 просмотров • 2 лет назад