Loading video...
Video Failed to Load
Future CSS Tip! 🚀 You can create auto-resizing text inputs with one line of CSS 🔥 textarea, input { field-sizing: content; } No more JavaScript to sync a textarea height to fit the content 🫶 Perfect for chat, messaging, comments, etc. 💬 The size of your input will grow... show more
319,217 views • 2 years ago •via X (Twitter)
20 Comments
Here's that @CodePen link! 🚀 Only available in Chrome Canary at the moment 🥲 Fallback would be that your inputs don't resize unless you tap into it with some JavaScript ✨
Everyone is getting ahead with AI. You should be too. Summarize documents, craft emails, and generate custom content instantly with this powerful tool. It's like having ChatGPT tailored for your job. Try it for free.
Nice. I also saw @wesbos tweeting about this. This is quite a big deal!
@wesbos Yeah, such a great addition! 🫶 It went through a little renaming recently, was going to be slightly different a couple of months ago. Like the new name 💯
No freaking way, I've been struggling so much with that 😂 You saved us sir
Really nice once it actually is available in many browsers.
Yeah, fortunately, we have "supports" so we can get things in place as a nice Easter egg for those using supported browsers. Kinda nice too as it makes you think a bit more about design as you implement things I've found ✨
What would be the fallback for non-supported browsers?
ho do you add this smooth cursor effect on your vids? I'm so obsessed with it
what software do you use to edit your tutorials like this ?
@discord time to use the css instead of js lol
I usually used javascript scrollheight method to achieve it.
Amazing 👏👏
🤯❤️
Saw this on LinkedIn today. Good that this tip is spreading and making the rounds. Makes it much easier 💯👏🏾
Cool tip
Does this support every browser?
How did you do the glow effect on the border? It was so clean 🥶
What do you use to record these screens? Super slick with the zooming in and out effects. As always that’s for sharing and ask the help! 👏🏻🙏🏻🙌🏼
Awesome, that’s great!
![Animated exclusive accordions with CSS 😎 ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: calc-size(auto); } Exclusive On the way! 🫶](https://image.24vids.com/tw-1812966924294238558/ext_tw_video_thumb/1812964808762798080/pu/img/IlR57VOsWG8tcoiP.jpg)
![CSS only animated exclusive accordion update 🚀 details { interpolate-size: allow-keywords; } ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: auto; }](https://image.24vids.com/tw-1839124306300924244/ext_tw_video_thumb/1839118135955525632/pu/img/7a_TuM6gwTjo1BWc.jpg)
![CSS Tip! ✨ You can create icon sprite animations using the steps() animation-timing function 🤙 You could use this to create little icon button animations, etc. 😎 But how do you do it? Like this 👇 button img { object-fit: cover; object-position: 0 0; } The image is a sprite strip of the frames in the animation. To animate the frames, you do something like this: [aria-pressed=true] img { animation: play 0.5s steps(20) forwards; } @ keyframes play { to { object-position: 100% 0; } } We are toggling aria-pressed in our scripts to show a pressed state and we can then fire the animation to play our sprite 🎉 Check out the video that breaks things down a little bit CodePen.IO link blow! 👇](https://image.24vids.com/tw-1694442289047703873/ext_tw_video_thumb/1694440593613557760/pu/img/OB1gtiLZhnylcC9e.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)
![CSS Tip! 💪 You can create these tab controls with CSS :has() + radio buttons ✨ .tabs:has(input:nth-of-type(3)) { --count: 3; } .tabs:has(:checked:nth-of-type(3)) { --active: 2; } .tabs::after { translate: calc(var(--active, 0) * 100%) 0; width: calc(100% / var(--count)); } Two CSS :has() tricks here combined with a rendering trick 🤙 The tab control is a container using display: grid. You can use :has() to count the number of tabs in the container: .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 🫶 Once you know the number of tabs, you know how to size the indicator: .tabs::after { content: ""; position: absolute; height: 100%; width: calc(100% / var(--count)); } It's a pseudoelement that uses --count to determine its size 📏 The next :has() trick is determining which tab is active or :checked as it's an 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; } The last rendering trick 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-1746099478656901617/ext_tw_video_thumb/1746099293872898048/pu/img/oonp9Ek6MULFcFjk.jpg)
