Загрузка видео...
Не удалось загрузить видео
don't sleep on using CSS counters for counting your content 👨🍳 section::before { content: counters(section,'',pad)'.'counters(content,'',pad) } /* 01.04 */ @counter-style pad { system: extends decimal; pad: 2 '0'; } check it! 👇
95,627 просмотров • 1 год назад •via X (Twitter)
Комментарии: 10
this is kinda hard to get a video of so might be worth a little breakdown demo 🤔 but using CSS to count your content means you don't have to bake numbered headings into your content swap the content order? no issue pad the numbers? no problem, use a counter style 🤙
had some questions about this one so made a breakdown demo 🤙 should help explain things 🧑🍳
As seen on Shark Tank: Never lift your heavy mattress to change sheets. Use this headband that wraps around your bed.
I always suspected you could do some crazy ish with counters but never really dug into it.
gonna spin up a clearer demo because I realise this is quite hard to follow 😅
Clean.
this slaps. when everyone is going very like rounded i like the sharp edges and the 1 in the corner. looks dope
I understand nothing 🤣 wtf is that css property 😱
jus' built a new demo to help explain it 🙏
This is so crazy that I have literally never seen this feature before And it's baseline!
![CSS Trick 🧲 You can create magnetic links with the power of custom properties and some JavaScript 💪 a { translate: calc(clamp(-1, var(--x), 1) * var(--pad-x)) ...; transition: translate var(--s, 1s) var(--ease, var(--elastic)); } a:hover { --s: 0s; } The trick here is to pad out the list items wrapping your links and use that as a translation limit 🛑 Start by using some JavaScript to calculate a value between -1 and 1 for both the x/y axis on pointermove for each list item, not the link! 🔗 If your pointer was at the center of the item, you'd get [0,0]. If it was in the top right, you'd get [1,-1] ☝️ It's worth checking out the JavaScript snippet to see how the mapping function works. Essentially, you create a function that when given a value between two bounds, will give you a mapped value back 🤙 const mapX = mapRange( item.offsetWidth * -0.5, item.offsetWidth * 0.5, 1, -1 ) Then, on pointermove, you plug the pointer position in to get the value back out and pass that into your CSS const x = mapX(item.centerX - event.x) document.documentElement.style.setProperty(--x, x) When the pointer leaves the list item, you make sure to reset these values back to 0 ✨ Once CSS has your values, it's the trick of updating the translation of each part You know that in each axis, you only want to translate the link by the padding amount li a { translate: calc(clamp(-1, var(--x), 1) * var(--pad-x)) calc(clamp(-1, var(--y), 1) * var(--pad-y)); transition: translate var(--speed, 1s) var(--ease, var(--elastic)); } This will translate the link within the list item by the desired amount. The cool part here is that you can set an offset for the text inside the link and have that move at a different rate ⭐️ By only updating the --pad-x/y custom properties for the inside the link, you can control how much it moves nav a span { --pad-x: 0.25rem; --pad-y: 0.25rem; } And the last piece, how do you update the behavior for transition speeds? And so it springs back like that? Again, use custom properties ✨ a:hover { --s: 0s; } a { transition: translate var(--s, 1s) var(--ease, var(--elastic)); } By default, a link will use --elastic easing via linear() and have a transition-duration of 1s. When a link is hovered that speed becomes 0s because you want the link to magnetise to your pointer. How about that little gap between when your pointer enters the item but hasn't hovered the link? Set a different transition so it transitions to being hovered 🫶 nav li:hover a { --ease: ease-out; --speed: 0.1s; } That's kinda it! 🙌 Use JavaScript (~40 loc) to get the information and then let CSS do all the lifting for you 💪 Any questions or suggestions, let me know 🙏 If you want a walkthrough video, also let me know please 🙏 CodePen.IO link below 👇](https://image.24vids.com/tw-1745716136824672271/ext_tw_video_thumb/1745612660081881088/pu/img/SsGz-uqmfdr1KZ7H.jpg)
