Загрузка видео...
Не удалось загрузить видео
css holographic trading card breakdown 🧑🍳 a combo of masked layers with mix-blend-mode pointer position drives the scale/translate of the colored gradients 🌈 check the layers 👇
84,043 просмотров • 1 год назад •via X (Twitter)
Комментарии: 36
Gorgeous as always
🙏🙏🙏
Amazing ✨
wow .. one of my best follow on x
@amitanshu_sahu appreciate that 🙏
Too cool. Any chance this is in a public repo? Asking for a friend who wants to do a lot more fun things with their trading card websites 😅
it's available for the very very smol price of @CodePen hearts ❤️😅
@CodePen should be able to break down the parts needed 🤞 but it's in more of an "educational" state than copy/paste "production" state with an eye on breakin' it down in one of the course lessons 🙏
@CodePen Indeed! Shooting over to my dev team. Big, big fan of all your work! And as someone who manages like 5 Shopify sites, looking forward to seeing the output from this next employment chapter!
@CodePen awesome – yeah, if you have any issues, hit me up 🤙 only thing i might change is adjusting the emboss lighting filter in Firefox as it's a little strong there 😅 thrilled to have joined 💯 got some awesome things lined up 🧑🍳
You’re so good at this man!
lots of practice - 'ppreciate it 🙏 side note, we got Gyokeres 🎉
wow, amazing work
you keep amazing me of things I wouldn’t have thought were possible. Nice!!
thanks 🙏 i gotta keep finding things that push me to try new stuff
🐐
The two layers with you on it are in sync ?
exactly that ✅ a shared style for translating the img 🤙
Damnnnn.... Making it is one thing and you like explain it so well glad i found this account.
thanks for saying this 🙏 real hope my site is gonna be helpful for people too
He realizado una prueba en una tienda online... Gracias
you should add a depth map
Did you implement any touch interactions? Like touchmove to do the same thing as hover?
The holographic effect is superb.
Very cool
This is amazing
🔥🔥🔥
This is dope af
Sick and congrats! 🚀
Fire 🔥🔥🔥
That's amazing. I want it on so many things, now! 😍
v cool
SUPERB!!!!!!!!!
Genius use of blend-mode+pointer tracking! Perfect for interactive portfolio items ✨ Will adapt this for client projects.
Love this
Ai can only copy what it learn, but can never initiate this creativity.
![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 use mask-composite and some JavaScript to create this pointer proximity following glow border ✨ .glow { mask-composite: intersect; mask-clip: padding-box, border-box; mask: linear-gradient(#0000, #0000), conic-gradient(#0000 0deg, #fff, #0000 45deg); } The trick is to mask a background-image with a combination of mask layers. mask-composite: intersect; means the mask used will be the intersection of the layers 🔥 use source-in, xor; in browsers that don't support intersect; In this demo, you can use pseudoelements and rely on scoped custom properties to do a lot of the heavy lifting for you 🙌 Once you've masked the background, you need to update the starting angle of the conic-gradient on pointermove 👆 You can work that out by getting the center point of each card and then calculating the angle between that and the pointer with Math.atan2 🤓 let ANGLE = Math.atan2( event?.y - CARD_CENTER[1], event?.x - CARD_CENTER[0] ) * 180 / Math.PI ANGLE = ANGLE < 0 ? ANGLE + 360 : ANGLE; CARD.style.setProperty('--start', ANGLE + 90) You plug that into your conic-gradient mask as a custom property accounting for --spread ⚡️ conic-gradient(from calc((var(--angle) - (var(--spread) * 0.5)) * 1deg), #000 0deg, #fff, #0000 calc(var(--spread) * 1deg)); To get the blur, you apply a blur to the glow container on each card 🤙 .glows { filter: blur(calc(var(--blur) * 1px); } That's it! Layers of masks that are clipped and composited before being blurred 😎 The added trick is to fade each one in when the pointer is in the defined proximity of the card. For example, don't show unless within 100px of a card. You can see that in the video. Check out the JavaScript code for that 🫶 Couldn't resist making this one 😁 CodePen.IO link below! 👇](https://image.24vids.com/tw-1734369933558010226/ext_tw_video_thumb/1734365662590418944/pu/img/320Dgq_k3RZoZOFV.jpg)
