Post

Jhey ʕ·ᴥ·　ʔ
@jhey.dev

CSS-only magnetic link effect 🤯 li:has(a:is(:hover, :focus-visible)) {anchor-name: --a; } ul::before { left: anchor(--a left); width: anchor-size(--a width); } using CSS anchor positioning, declare an anchor on hover for the indicator 🚀

17 reposts347 likes

Jhey ʕ·ᴥ·　ʔ
@jhey.dev

reminded of this one after someone said about doing the one from yesterday "CSS only" there's nuance 1. the one from yesterday has a lazy effect whereby the ends move at different speeds 2. you can't use CSS anchor with a clip-path 3. mix-blend-mode won't get the style bsky.app/profile/jhey...

Jhey ʕ·ᴥ·　ʔ@jhey.dev

lazy exclusion tabs using CSS :has() 🐐 transition custom properties for a clip-path give one a slight delay .track { clip-path: inset(0 var(--x2) 0 var(--x1)); transition: --x1 0.2s, --x2 0.2s 0.1s; } .tabs:has(input:nth-of-type(1):checked) .track { --x1: 0; --x2: 89%; } (trick in video 🚀)

trav
@techsavvytravvy.com

i remember telling my boss years ago that frontend just wasn't challenging me enough when asked why i wanted to be moved to a different department. lol i was so dumb

Phil Wolstenholme
@wolstenhol.me

I got nosy and went on the debug URL from the first frame of the video 😁 What are the view transitions for? I thought maybe they were for the smoothness of the before/after when it changes position, but they both seem to work okay without the `view-transition-name`