Video yükleniyor...
Video Yüklenemedi
the trick: CSS position: sticky + mix-blend-mode: difference the bonus trick: add an extra layer and chain the blend to block content out 👨🍳
160,153 görüntüleme • 1 yıl önce •via X (Twitter)
31 Yorum
codepen for the lazy ones
ha – you are good at this 🙏😅
public service 💪 screenshot, copy text, create link, spam it on X
Wow, amazing tip. 👍
hi jhey, your work is incredible. is your work structured anywhere so that i can learn and try recreating these animations step by step
Learnt a lot. thanks for sharing!
These techniques showcase really creative use of CSS blending and positioning to achieve dynamic visual effects. Thanks for sharing these insightful tricks for enhancing web design!
Wonderful tip!!
cooooool
I'm interested by debug CSS because the best I do is just border 1px solid red
This is such a clever technique! The sticky + blend-mode combo is brilliant for creating always-visible navigation. Love how you're pushing CSS capabilities - super inspiring work! 🎨
Thanks for sharing, love the extra layer tip to block content 👌🏻
no problem at all – that comes in pretty handy if you have color content that you don't want to intefere 🤙
Ohhh you back 🥰🥰🥰
gonna give it a go 🙏
Too bad it only works properly with black and white. Different colors on the logo and buttons only make it look weird.
well yes, to be expected, it's "difference". you would expect red to give teal, etc. otherwise you need to introduce blocked out layers or isolate them
Is this what `isolation` property is for?
Look amazing 😃
When did this property start? I’ve been working with CSS since it was first released and am only just now hearing about it. Super cool.
Slick AF
great share
I tried blend mode and it broke animation performance by requiring all CSS animations to be done on the main UI thread
there is no animation here, not required
Ah, that's good, cuz it wouldn't blend well
it is blending, jus' doesn't need animating composited animations on blend layers typically work fine
ok flashbang ok
@evertjr
Looks amazing
Interesting! So you can achieve that using only css?
Please update your browser
![CSS Tip 🤙 You can create this header effect using position: sticky, clip-path, and custom properties 🔥 (Video 👀) header { position: sticky; top: var(--margin); } main { clip-path: inset(var(--header) 0 0 0);) } No mix-blend-mode or animations required ✨ What's the trick then? 🧐 Duplicate the header element first. Then fix the positioning of one behind the content. header[aria-hidden] { position: fixed; top: 0; margin-top: var(--margin); } Clip the top of the content to reveal the fixed header and put a sticky-positioned header inside it that matches up in position and size ✂️ :root { --header: calc(var(--margin) + var(--font-size)); } main { clip-path: inset(var(--header) 0 0 0); } header { position: sticky; top: var(--margin); } Make your life easier with custom properties 🙌 As the body scrolls, the fixed header gets covered by the clipped content and creates the effect ✨ And because the sticky header is "stuck" it reveals itself as the content goes out of view 😍 This one's pretty cool. You can set the font color to whatever you want. At first glance, it looked like it was a mix-blend-mode thing. It doesn't have to be! Think about it and lean into z-indexing 🫶 Watch the video to get an idea of things with the exploding view 🤯 Any questions, etc. let me know! Will likely do a YouTube video on this one too! 🙏 CodePen.IO link below! 👇](https://image.24vids.com/tw-1742391976517927321/ext_tw_video_thumb/1742387238879514624/pu/img/qhFKDDbPrYvBH8B6.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)
