Loading video...
Video Failed to Load
image crossfade with CSS :has() 💅 img { transition: opacity 0.24s; } ul:has(li:nth-of-type(2):hover) img:nth-of-type(2) { mix-blend-mode: plus-lighter; opacity: 1; z-index: 2; } few tricks to this demo 🤙
108,894 views • 1 year ago •via X (Twitter)
10 Comments
the impact of "plus-lighter" 👇 it might seem minimal but your eyes pick up on it without even noticing when doing a crossfade you're trying to avoid the backdrop showing through so apply "mix-blend-mode" to the thing being faded in
this one was a neat challenge request 🤙 leaning into CSS foundations and then taking control with a little JavaScript looks like a lot of code because it caters to configuring different behaviors, etc. 😁 here's the @CodePen 👇
my bookmarks are basically just all your posts
appreciate it 😅 this year's "holidays project" is to properly build out the site to accompany the newsletter 🙏 then you can jus' bookmark the site hopefully ha
This just gave me such a cool new use case for a project I'm working on right now. Suckers can get shitfaced on #BlackoutWednesday. I'll spend the night playing with code like the cool kids.
what's "Blackout Wednesday"? 👀 i'm literally sittin' here writing today's newsletter issue
can you share the link/code?
Love how you used :has() to create a seamless crossfade, especially with the mix-blend-mode trick!
Oh God, heavenly, beyond explainable
Omor
![exploded views with CSS grid + 3D transforms 🤙 [data-explode=true] .layer { translate: 0 0 2rem; } .layer:hover .shadow { opacity: 1 } .shadow:has(+ .layer:hover) { opacity: 0.2; } leverage the cascade 🤌](https://image.24vids.com/tw-1898101759202967975/ext_tw_video_thumb/1898101615229288448/pu/img/kdrko5rkyAjDmVPY.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)
![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)
![dynamic toggle with CSS :has() 🎁 .control:not(:has(:first-of-type:checked)) .indicator { translate: 100% 0; } leverage [type=radio]:checked with :has() to set the visuals 🤙](https://image.24vids.com/tw-1915845187294925272/amplify_video_thumb/1915843861248876544/img/y8kPsyeBF2LzfFL0.jpg)
