Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

842,603 görüntüleme • 9 ay önce •via X (Twitter)

37 Yorum

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

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 profil fotoğrafı
gandan9 ay önce

remember this?

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

sure do!

Nikita profil fotoğrafı
Nikita9 ay önce

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

Chief Twat profil fotoğrafı
Chief Twat9 ay önce

Nice, what about shining thru? :)

Steve Hayes profil fotoğrafı
Steve Hayes9 ay önce

Appreciate the work on this, amazing execution 🙌

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

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 profil fotoğrafı
Steve Hayes9 ay önce

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 ʕ•ᴥ•ʔ profil fotoğrafı
jhey ʕ•ᴥ•ʔ9 ay önce

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

Prince Zoho profil fotoğrafı
Prince Zoho9 ay önce

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

dom profil fotoğrafı
dom9 ay önce

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

OPM profil fotoğrafı
OPM9 ay önce

that's genius

David Fernandes profil fotoğrafı
David Fernandes9 ay önce

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

Mykhailo Sorochuk profil fotoğrafı
Mykhailo Sorochuk9 ay önce

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

Andrew Krippner profil fotoğrafı
Andrew Krippner9 ay önce

this is both beautiful and functional, great work

Mukul profil fotoğrafı
Mukul9 ay önce

🤔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 profil fotoğrafı
Yuma Tanaka9 ay önce

@designgurra

Naiza profil fotoğrafı
Naiza9 ay önce

so cool effect

Vishal G. profil fotoğrafı
Vishal G.9 ay önce

@timvandaats

Amol Kelkar profil fotoğrafı
Amol Kelkar9 ay önce

Loved it!

Jon raRaRa profil fotoğrafı
Jon raRaRa9 ay önce

What about the border?

Jose profil fotoğrafı
Jose9 ay önce

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

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

Brilliant 👌

D-lan profil fotoğrafı
D-lan9 ay önce

Wait thats smart af When course drop?

cris profil fotoğrafı
cris9 ay önce

looks clean

Dreh profil fotoğrafı
Dreh9 ay önce

such a brilliant way of doing this 😁

Keith Harvey profil fotoğrafı
Keith Harvey9 ay önce

🤯

Francesco Piccoli profil fotoğrafı
Francesco Piccoli9 ay önce

cc @benmoha

Stephen Parker profil fotoğrafı
Stephen Parker9 ay önce

Very cool! 🤙

Dhinesh profil fotoğrafı
Dhinesh9 ay önce

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

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

Nutty 🤙

César Couto profil fotoğrafı
César Couto9 ay önce

Love it.

origami profil fotoğrafı
origami9 ay önce

Stealing this

Lúcás profil fotoğrafı
Lúcás9 ay önce

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

Theo Vararu profil fotoğrafı
Theo Vararu9 ay önce

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

Josh Johnson profil fotoğrafı
Josh Johnson9 ay önce

Geeeeeeeze. That is so dang clever.

stevie profil fotoğrafı
stevie9 ay önce

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

Benzer Videolar

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 görüntüleme • 2 yıl önce