Loading video...
Video Failed to Load
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 🤌
272,917 views • 1 year ago •via X (Twitter)
10 Comments
David Hill1 year ago
Clever sausage 🙌🏻
Kian Bazza1 year ago
Very cool, haven’t had the chance to work with 3D transforms. But I will find an excuse to do so
Patrick ✦1 year ago
at this point i'm going to have to make my own jhey(dot)edu website
ahmet1 year ago
hey what software do you use to record your screen?
Chris Lane Jones1 year ago
This is out of this world, for real!
Igor bedesqui1 year ago
I love the idea of just using "layer", codifying the layering model and letting the ui style itself, and now I got even another reason to pursue it??? come on jheyyy
artTILT1 year ago
These are great. Nice work!
sohey.eth (on farcaster)1 year ago
Ooft 😮💨
Tom Menezes1 year ago
It’s unfortunate that we never actually go back to the bookmarks because this is actually sick
typesafeui 😶🌫️1 year ago
🍳
![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)
![Design Engineering Tip: Separate the object from its shadow. When an element lifts away from a surface, the shadow doesn't always need to move with it. Keeping the shadow grounded and fading it based on distance can create a stronger sense of depth and physicality. Used carefully, this can make interfaces feel more tangible and less like layers floating on a screen. It's not something I'd apply everywhere, but for moments that need extra emphasis, it can be surprisingly effective. js const card = document.querySelector(".notification"); const shadow = document.querySelector(".shadow"); card.animate( [ { transform: "translateY(0)" }, { transform: "translateY(-160px)" }, ], { duration: 900, easing: "cubic-bezier(.64,0,.78,0)" } ); shadow.animate( [ { opacity: 0.5, transform: "scaleX(1)" }, { opacity: 0, transform: "scaleX(.35)" }, ], { duration: 700, easing: "ease-out" } );](https://image.24vids.com/tw-2063591609392840984/amplify_video_thumb/2063591486801821696/img/YceqtRrCxfLhcDIj.jpg)
![neat trick for the sheet effect by transforming the body with CSS when you have :popover-open ✨ :root:has(.drawer:popover-open) body { scale: calc(0.95 + (var(--c) * 0.05)); translate: 0 calc(.875rem * (1 - var(--c)); } [popover] isn't affected as it's in the :top-layer 🚀](https://image.24vids.com/tw-1847369237938995665/ext_tw_video_thumb/1847367287357194240/pu/img/DI1UxJs_Ypjgq5r4.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 Tip! 🐳 You can add little details like this scale down on scroll effect with scroll-driven animations and some sticky positioning 🤙 section { animation: scale-down; animation-timeline: view(); animation-range: exit; } @keyframes scale-down { to { scale 0.8; } ] In this smaller example, you can lean into using the position to drive an animation that scales itself down as it leaves the viewport (Seen on the Apple Vision Pro site 🍏) The nice thing here is that if you don't have scroll-driven animations, the user still gets a good experience ✨ So how do you do it? There isn't much to it header { transform-origin: 50% 0%; animation: scale-down both ease-in; animation-timeline: view(); animation-range: exit; view-timeline: --header; } @keyframes scale-down { to { scale: 0.8 0.8; } } That's it. The layout makes use of position: sticky so that the element stays in the shot whilst you scroll the page. As it leaves the page, it scales down inside the 🫶 The other smol animation here is fading the overlay on the video out 😎 Real easy. You may notice the view-timeline you defined above for the 👀 header { view-timeline: --header; } You have a pseudoelement on the text content of the header that lives inside a header > section::before { background: hsl(0 0% 0% / 0.75); opacity: 1; animation: fade both linear; animation-timeline: --header; animation-range: exit-crossing 0% exit 0%; } @keyframes fade { to { opacity: 0; } } You use a slightly smaller range on this with exit-crossing to fade it out before you start the scale down animation 🤏 That's it! Thought this smaller example would be easier to grok for people 🙏 It's also covered with JavaScript if you really want it for your sites 🤙 CodePen.IO link below 👇](https://image.24vids.com/tw-1752479022674481373/ext_tw_video_thumb/1752475535978934272/pu/img/5naYIYo6vw_NbpbO.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 custom easings for your animations and transitions with linear() 🔥 :root { --bounce: linear(0, 0.39, 0.57, 0.52, ..., 1); } .digit { transition: translate 1s var(--bounce); } Perfect for adding character to animations like this MRR widget! 🫶 Some of the easing code is obfuscated in the snippet there 👆 You would likely write these custom eases once and then reuse them in your projects 🎬 For example, here's the CSS for an elastic ease 🎾 :root { --elastic: linear( 0, 0.0009 8.51%, -0.0047 19.22%, 0.0016 22.39%, 0.023 27.81%, 0.0237 30.08%, 0.0144 31.81%, -0.0051 33.48%, -0.1116 39.25%, -0.1181 40.59%, -0.1058 41.79%, -0.0455, 0.0701 45.34%, 0.9702 55.19%, 1.0696 56.97%, 1.0987 57.88%, 1.1146 58.82%, 1.1181 59.83%, 1.1092 60.95%, 1.0057 66.48%, 0.986 68.14%, 0.9765 69.84%, 0.9769 72.16%, 0.9984 77.61%, 1.0047 80.79%, 0.9991 91.48%, 1 ); } The idea is that you map a set of points between [0, 0] and [1, 1]. This is cool because you can convert something like an SVG path to these coordinates. Link below for a gist with some eases in 🤙 As for the MRR widget, the trick is to set out some number tracks and translate them to show the correct number 🧮 You can translate by line-height based on the value. And the original value you can convert to a currency string like $1,000,000.00 using JavaScript's Intl.NumberFormat() const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', }) formatter.format(1_000_000) Check out the exploding view and the video to see how it all works! 👀 CodePen.IO link below! 👇](https://image.24vids.com/tw-1735499859715584298/ext_tw_video_thumb/1735496613617926145/pu/img/K88_7XNeukK-81aQ.jpg)
