Loading video...
Video Failed to Load
once you grasp CSS counters, then you can leverage the cascade ๐งโ๐ณ content: counters(section, '.', pad) var(--t, ' '); need a certain section to start at a different number? use scoped custom properties ๐ซก
57,768 views โข 1 year ago โขvia X (Twitter)
3 Comments
Jidรฉ โจ1 year ago
That drag n drop โค๏ธ how is it done ?
Today's bread1 year ago
Are you indirectly saying the drag and drop is just CSS?
Karan Rathod1 year ago
This man never sleeps and never stops to amaze me with magic of css.
![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)
![CSS Trick ๐ค You can create these tab bar controls by using :has() to count the number of tabs โญ๏ธ .tabs:has(input:nth-of-type(3)){--count: 3;} .tabs:has(:checked:nth-of-type(3)){--active: 200%;} .tabs::after{ translate:var(--active) 0;} Let's break it down in this ! ๐ผ Couple of CSS :has() tricks here combined with custom properties ๐ First things first, lay out the tabs using display: grid. This gives you a way to create equal-width tabs ๐ .tabs { display: grid; grid-auto-flow: column; } Then you use :has() to count the number of tabs and store that in a custom property ๐ค .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(input:nth-of-type(4)) { --count: 4; } Using the cascade, the last valid :has() gives you the number of tabs ๐ซถ Using the tab count, you can size the tab indicator. For the tab indicator, use the tabs pseudoelement: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } See how you can use --count to determine its size ๐ Next, use :has() to determine which tab is active or :checked with input [type=radio] .tabs:has(:checked:nth-of-type(2)) { --active: 1; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } You can use a zero-indexed translation here. If the second input is :checked, set --active: 1, then translate the pseudoelement on the tabs to that position ๐ .tabs::after { translate: calc(var(--active, 0) * 100%) 0; } Or you could set active to the translation: .tabs:has(:checked:nth-of-type(2)) { --active: 100%; } Setting the custom property allows you to use the index elsewhere if you need it ๐ค The final piece is using mix-blend-mode ๐ The tabs have a black background-color, the pseudoelement is white, and the label text is white. When you use mix-blend-mode: difference on the pseudoelement it will give this effect that the text transitions from white to black sliding across ๐ .tabs::after { color: hsl(0 0% 100%); mix-blend-mode: difference; } You can totally mix up the colors here though and go with a different effect. The mechanics of how you can use CSS :has() is the main point here ๐ As always, any questions, suggestions, etc. let me know CodePen.IO link below! ๐ (There's even a Tailwind CSS play for this one too ๐)](https://image.24vids.com/tw-1750370338041647245/ext_tw_video_thumb/1750367384505081856/pu/img/ZVW6XE5SU4mBEB5M.jpg)
![Future UI && CSS Tip! ๐ฎ You could use View Transitions to animate CSS grid position and create an OSX-style exposรฉ for a portfolio ๐ฅ It's a grid where things move based on state. Wrapped in a VT ๐ค [data-expose] section{ grid-area:var(--x)/var(--y); } CodePen.IO link below ๐](https://image.24vids.com/tw-1684294735228289026/ext_tw_video_thumb/1684293327405871106/pu/img/_8tGY2yw7r3sRTOo.jpg)
