Загрузка видео...
Не удалось загрузить видео
new component: morphing tabs drag any tab to reorder it. neighboring tabs spring out of the way while the selected one stays melted into the content below. free and open source install it via shadcn try here -
10,482 просмотров • 1 месяц назад •via X (Twitter)
Комментарии: 13
Saurabh1 месяц назад
inspiration:
Bikash ✱1 месяц назад
@shadcn Looks beautiful ❤️
Saurabh1 месяц назад
@shadcn thanks bro
Dev1 месяц назад
@shadcn Saurabh ,Just tested on mobile — your shader doesn't render at all. Could be device-specific, since my own shader renders fine on the same phone. The second image is showing rendering issue like menu icon issue also.
Saurabh1 месяц назад
will check this
Hossain Jahed1 месяц назад
@shadcn You're Just cooking it day by day
Saurabh1 месяц назад
@shadcn thanks man
Alireza Najafi1 месяц назад
@shadcn Could it have borders around the selected tab and the content area? tried to do this and it was messy
Saurabh1 месяц назад
@shadcn yeah borders will not look good
Nil . Dev .1 месяц назад
@shadcn Finally live
Saurabh1 месяц назад
@shadcn yesss
Utkarsh Kumar Singh1 месяц назад
@shadcn Cool interaction. I feel like drags are underutilized in desktop design space.
Saurabh1 месяц назад
@shadcn yeah true
![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)
