Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

842,603 Aufrufe • vor 9 Monaten •via X (Twitter)

37 Kommentare

Profilbild von jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔvor 9 Monaten

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 🤙

Profilbild von gandan
gandanvor 9 Monaten

remember this?

Profilbild von jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔvor 9 Monaten

sure do!

Profilbild von Nikita
Nikitavor 9 Monaten

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

Profilbild von Chief Twat
Chief Twatvor 9 Monaten

Nice, what about shining thru? :)

Profilbild von Steve Hayes
Steve Hayesvor 9 Monaten

Appreciate the work on this, amazing execution 🙌

Profilbild von jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔvor 9 Monaten

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! 💡

Profilbild von Steve Hayes
Steve Hayesvor 9 Monaten

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 👀

Profilbild von jhey ʕ•ᴥ•ʔ
jhey ʕ•ᴥ•ʔvor 9 Monaten

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

Profilbild von Prince Zoho
Prince Zohovor 9 Monaten

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

Profilbild von dom
domvor 9 Monaten

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

Profilbild von OPM
OPMvor 9 Monaten

that's genius

Profilbild von David Fernandes
David Fernandesvor 9 Monaten

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

Profilbild von Mykhailo Sorochuk
Mykhailo Sorochukvor 9 Monaten

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

Profilbild von Andrew Krippner
Andrew Krippnervor 9 Monaten

this is both beautiful and functional, great work

Profilbild von Mukul
Mukulvor 9 Monaten

🤔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? 🤔

Profilbild von Yuma Tanaka
Yuma Tanakavor 9 Monaten

@designgurra

Profilbild von Naiza
Naizavor 9 Monaten

so cool effect

Profilbild von Vishal G.
Vishal G.vor 9 Monaten

@timvandaats

Profilbild von Amol Kelkar
Amol Kelkarvor 9 Monaten

Loved it!

Profilbild von Jon raRaRa
Jon raRaRavor 9 Monaten

What about the border?

Profilbild von Jose
Josevor 9 Monaten

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

Profilbild von Danny Williams
Danny Williamsvor 9 Monaten

Brilliant 👌

Profilbild von D-lan
D-lanvor 9 Monaten

Wait thats smart af When course drop?

Profilbild von cris
crisvor 9 Monaten

looks clean

Profilbild von Dreh
Drehvor 9 Monaten

such a brilliant way of doing this 😁

Profilbild von Keith Harvey
Keith Harveyvor 9 Monaten

🤯

Profilbild von Francesco Piccoli
Francesco Piccolivor 9 Monaten

cc @benmoha

Profilbild von Stephen Parker
Stephen Parkervor 9 Monaten

Very cool! 🤙

Profilbild von Dhinesh
Dhineshvor 9 Monaten

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

Profilbild von Jordan Dingle
Jordan Dinglevor 9 Monaten

Nutty 🤙

Profilbild von César Couto
César Coutovor 9 Monaten

Love it.

Profilbild von origami
origamivor 9 Monaten

Stealing this

Profilbild von Lúcás
Lúcásvor 9 Monaten

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

Profilbild von Theo Vararu
Theo Vararuvor 9 Monaten

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

Profilbild von Josh Johnson
Josh Johnsonvor 9 Monaten

Geeeeeeeze. That is so dang clever.

Profilbild von stevie
stevievor 9 Monaten

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

Ähnliche Videos

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 Aufrufe • vor 2 Jahren