Post

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 🚀

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 🚀)

9/11/24, 8:33 pm0 reposts12 likes

trav

@techsavvytravvy.com

9 Nov 2024

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