ANIMATED TAB SWITCHER with CSS :HAS pseudo class

No video

ANIMATED TAB SWITCHER with CSS :HAS pseudo class

Рет қаралды 1,429

Күн бұрын

The :HAS pseudo class in CSS is a pretty powerful feature that allows you to style a parent element based on the children selectors. In this demo, we see how to use this pseudo class to create an animated tab switcher.
Codepen: codepen.io/Dil...
Resources:
* • Why is REPEAT 1fr not ...
* • BEFORE & AFTER PSEUDO ...
* • ANIMATED SWITCHER/TOGG...
Subscribe to My Channel: bit.ly/deeecode
Join my Discord: deeecode.com/d...
_____
🌟 About Me:
Dillion Megida, creator of DEEECODE, is a Software Engineer, Developer Advocate and a Content Creator passionate about simplifying topics around Tech via articles and videos.
_____
⚡️ Connect with me:
- Personal youtube: / dillionmegida
- Personal website: dillionmegida....
- Twitter: / iamdillion
- Instagram: / deeecode
- LinkedIn: / dillionmegida
- GitHub: github.com/dil...

Пікірлер: 13

@golden1987 7 ай бұрын

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 7 ай бұрын

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

@jaswanthreddy8870 7 ай бұрын

Great video 😊😊😊😊

@deeecode 7 ай бұрын

I'm glad you enjoyed it :)

@everything_Ola 7 ай бұрын

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

@deeecode 7 ай бұрын

Thank you very much

@jaydeep-p 7 ай бұрын

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

@deeecode 7 ай бұрын

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