Loading video...

Video Failed to Load

Go Home

CSS Tip! ๐Ÿค™ You can create this magnetic :hover effect with CSS anchor positioning, :has, and zero JS ๐Ÿ”ฅ article { anchor-name: --develop; } ul:has(li:hover) { --anchor: --develop; } ul::after { inset: anchor(var(--anchor) top) anchor(var(--anchor) right) ... ; } How do you keep it clean when entering/exiting the list?...

729,091 views โ€ข 2 years ago โ€ขvia X (Twitter)

10 Comments

jhey โ–ฒ๐Ÿป๐ŸŽˆ's profile picture
jhey โ–ฒ๐Ÿป๐ŸŽˆ2 years ago

Here's that @CodePen link! ๐Ÿš€ Should get something good in all browsers ๐Ÿซถ That's the joy of progressive enhancement!

jhey โ–ฒ๐Ÿป๐ŸŽˆ's profile picture
jhey โ–ฒ๐Ÿป๐ŸŽˆ2 years ago

Fun fact: Transitioning CSS anchor positioning wasn't going to work ๐Ÿฅฒ But, some early demos I put together for you helped change that ๐Ÿ™ The transitioning regressed in a Chome Canary update and those "fun" demos helped solve it ๐Ÿ”ฅ

jhey โ–ฒ๐Ÿป๐ŸŽˆ's profile picture
jhey โ–ฒ๐Ÿป๐ŸŽˆ2 years ago

When CSS anchor-default shipped in Canary, another fun demo idea prompted whether we could use that to transition anchors ๐Ÿค” And that raised another Chromium issue ๐Ÿ‘‡ The gist of the story is: "Building all sorts of different things helps the platform"

jhey โ–ฒ๐Ÿป๐ŸŽˆ's profile picture
jhey โ–ฒ๐Ÿป๐ŸŽˆ2 years ago

And this was the demo that prompted that whole CSS exploration in the first place ๐Ÿ˜… Jus' wanted to make a bear paw move between the inputs because you can ส•ใƒŽโ€ขแดฅโ€ขส”ใƒŽ ๏ธต โ”ปโ”โ”ป

Guillermo Rauch's profile picture
Guillermo Rauch2 years ago

๐Ÿ”ฅ

interplato's profile picture
interplato2 years ago

Any ideas how to accomplish this

jhey โ–ฒ๐Ÿป๐ŸŽˆ's profile picture
jhey โ–ฒ๐Ÿป๐ŸŽˆ2 years ago

How do you want it to work? On scroll? On click? Can definitely throw something together for you ๐Ÿค™

Salman K A A's profile picture
Salman K A A2 years ago

Made something like that using svelte.

Steve C's profile picture
Steve C2 years ago

Have you seen the one @KevinJPowell did where you can see the gutters on the grid? Pretty sick

jhey โ–ฒ๐Ÿป๐ŸŽˆ's profile picture
jhey โ–ฒ๐Ÿป๐ŸŽˆ2 years ago

@KevinJPowell Not sure I have. Someone tagged me in the quoted post and it reminded me of transitioning anchor position And that reminded me of an issue I raised from working with the spec last year ๐Ÿค“

Related Videos