ANIMATED TAB SWITCHER with CSS :HAS pseudo class

[@jaswanthreddy8870]

Great video 😊😊😊😊

[@deeecode]

I'm glad you enjoyed it :)

[@abdulmuminyqn]

Well explained

[@deeecode]

So glad to hear :)

[@everything_Ola]

😮
Wow. 👏 👏.
Good content. Very good.

[@deeecode]

Thank you very much

[@jaydeep-p]

What would you do if the widths of the tabs were not the same? I would do js

[@deeecode]

Yeap. If the widths were not the same, then you'd need to js to retrieve the width of each tabs, and use those widths to calculate the parent width.
You'd also need to take note of the fact that the widths can change, so you'd be quering the DOM often for that information
Another thing you can do is, if you know some tabs "should be wider" because of the content, you can do something like 30%, 45% 25%
So 30% for first tab, 45% for second tab and 25% for third tab....this way, you wouldn't have to constantly query the width of the tabs

[@golden1987]

Cool stuff. I modified your code to work with inset. Need a bit of math, buy those are my changes in your code:
--inset: 5px;
inset: var(--inset);
--width: calc( (100% / var(--count)) - (2 * (var(--inset))));
width: var(--width);
transform:translateX(calc(100% * var(--active) + (2 * (var(--inset)) * var(--active))));
transition: transform 300ms;
This will work for any number of tabs, of course you'll need to add more .tabs:has(.tab:nth-child(X).active) selectors :)

[@deeecode]

Wow that's a lot of calculations haha...thanks for sharing :)

[@allahisrabb3443]

Look your tutorials bosses

[@deeecode]

So glad to hear :)