正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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 👇

jhey ʕ•ᴥ•ʔ

146,335 subscribers

83,703 次观看 • 1 年前 •via X (Twitter)

科学技术艺术

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

a 3D CSS breakdown of what's happening 🤙 the trick is background-image layers powered by the same custom property for position and size then that's combined with a background-clip combo ✂️

a 3D CSS breakdown of what's happening 🤙 the trick is background-image layers powered by the same custom property for position and size then that's combined with a background-clip combo ✂️

jhey ʕ•ᴥ•ʔ

46,837 次观看 • 1 年前

I made this pinch gesture to “explode” the layers of this holographic card :)

I made this pinch gesture to “explode” the layers of this holographic card :)

Janum Trivedi

291,429 次观看 • 1 年前

CSS card parallax with pointermove + custom props 🧑‍🍳 <div class=ring style="--i: 2"> .ring { translate: calc(var(--px) * (var(--i) * -2rem)) calc(var(--py) * (var(--i) * 2rem)); } trick: pointer mapping to rotate card in 3D + translate rings 2D for the illusion 🤙 check it 👇

CSS card parallax with pointermove + custom props 🧑‍🍳 <div class=ring style="--i: 2"> .ring { translate: calc(var(--px) * (var(--i) * -2rem)) calc(var(--py) * (var(--i) * 2rem)); } trick: pointer mapping to rotate card in 3D + translate rings 2D for the illusion 🤙 check it 👇

jhey ʕ•ᴥ•ʔ

306,369 次观看 • 8 个月前

It’s an amalgam of SpriteKit particle layers, gradients and blend modes. Together they create a nice materiality. I liked the idea of using a turbulence burst to change between the material's colors

It’s an amalgam of SpriteKit particle layers, gradients and blend modes. Together they create a nice materiality. I liked the idea of using a turbulence burst to change between the material's colors

Alex Widua

19,632 次观看 • 2 年前

you can stack elements with css grid/subgrid by giving them the same grid position 🧑‍🍳 this scroll track window is a great use case for css grid + position: sticky catch the 3D breakdown 👇

you can stack elements with css grid/subgrid by giving them the same grid position 🧑‍🍳 this scroll track window is a great use case for css grid + position: sticky catch the 3D breakdown 👇

jhey ʕ•ᴥ•ʔ

128,603 次观看 • 7 个月前

keypad w/ CSS + <img> layers 🧑‍🍳 .key { mask: url(keycap.png); } .key:active img { translate: 0 20%; } use keycap images as a mask for the container that they translate in ✨ bonus: clip-path to clip the hit area + filter to style the keys 🤙

keypad w/ CSS + <img> layers 🧑‍🍳 .key { mask: url(keycap.png); } .key:active img { translate: 0 20%; } use keycap images as a mask for the container that they translate in ✨ bonus: clip-path to clip the hit area + filter to style the keys 🤙

jhey ʕ•ᴥ•ʔ

148,020 次观看 • 1 年前

🤌 Blurry blobs with Tailwind CSS 1️⃣ create a few colorful shapes 2️⃣ add some blur and mix-blend-modes 3️⃣ keyframe the position & size of the shapes 4️⃣ stagger the animation-delay for randomness

🤌 Blurry blobs with Tailwind CSS 1️⃣ create a few colorful shapes 2️⃣ add some blur and mix-blend-modes 3️⃣ keyframe the position & size of the shapes 4️⃣ stagger the animation-delay for randomness

Simon Vrachliotis

23,445 次观看 • 1 年前

#tinyCSStip You may have seen some of my demos using this on CodePen.IO already. Pure CSS halftone effect in 3 declarations: ✨ background layering a pattern and a map ✨ blend mode multiplication of the two layers ✨ contrast bump up to push all greys to either black or white

#tinyCSStip You may have seen some of my demos using this on CodePen.IO already. Pure CSS halftone effect in 3 declarations: ✨ background layering a pattern and a map ✨ blend mode multiplication of the two layers ✨ contrast bump up to push all greys to either black or white

Ana Tudor 🐯 (find me on Bluesky/ Mastodon)

27,203 次观看 • 2 年前

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 👀)

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 👀)

jhey ʕ•ᴥ•ʔ

437,487 次观看 • 2 年前

The making of a business card with 11 holographic foils💎

The making of a business card with 11 holographic foils💎

Jukebox

529,501 次观看 • 3 年前

🌌Create multi-layered Membership Cards or collections with Galaxis. 🌌How do you create amazing cards with 3 layers? Here’s a quick guide: 🖼️Design 3 unique layers ✨Layers with higher numbers are placed on top of the layers with lower numbers. ☝️Layer 1 will be the background, ☝️Layer 2 will be in the middle, and ☝️Layer 3 will be on the top of the card. ☝️Remember: use a transparent background when creating layer 2 and layer 3 files. 🌌Launch your multi-layered Membership Card masterpiece on Galaxis.

🌌Create multi-layered Membership Cards or collections with Galaxis. 🌌How do you create amazing cards with 3 layers? Here’s a quick guide: 🖼️Design 3 unique layers ✨Layers with higher numbers are placed on top of the layers with lower numbers. ☝️Layer 1 will be the background, ☝️Layer 2 will be in the middle, and ☝️Layer 3 will be on the top of the card. ☝️Remember: use a transparent background when creating layer 2 and layer 3 files. 🌌Launch your multi-layered Membership Card masterpiece on Galaxis.

Galaxis

26,575 次观看 • 2 年前

Here is a breakdown. Line and color layers are basically glued together with the line fill being on top of color and having the color layers as inverse mask The setup is a little bit convoluted but it serves it's specific purpose for the shading effects #Live2D

Here is a breakdown. Line and color layers are basically glued together with the line fill being on top of color and having the color layers as inverse mask The setup is a little bit convoluted but it serves it's specific purpose for the shading effects #Live2D

KDD (C0mms are closed)

29,112 次观看 • 6 个月前

Explore the captivating soundscape of #TheWildRobotMovie in this detailed sound breakdown. Peel back the layers to explore what’s behind the mix and learn how Skywalker Sound’s dialog team created multiple elements to bring Roz to life.

Explore the captivating soundscape of #TheWildRobotMovie in this detailed sound breakdown. Peel back the layers to explore what’s behind the mix and learn how Skywalker Sound’s dialog team created multiple elements to bring Roz to life.

Skywalker Sound

10,873 次观看 • 1 年前

people who hate nct’s music haven’t felt the warmth of 5 million vocal layers, a hole clenching rnb breakdown and haechan

people who hate nct’s music haven’t felt the warmth of 5 million vocal layers, a hole clenching rnb breakdown and haechan

Chair🍒🦋

40,147 次观看 • 10 个月前

$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! 👇$

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! 👇

jhey ʕ•ᴥ•ʔ

1,180,047 次观看 • 2 年前

Daily After Effects Tip - 67/100 This expression retains the scale of your layer when it's parented, creating the illusion of position. Use it on multiple layers parented to a null to create these radial animations. Grab the expression under this tweet.

Daily After Effects Tip - 67/100 This expression retains the scale of your layer when it's parented, creating the illusion of position. Use it on multiple layers parented to a null to create these radial animations. Grab the expression under this tweet.

Will Taylor

57,749 次观看 • 3 年前

The #DiorCouture Spring-Summer 2025 show opener was the first of several of Maria Grazia Chiuri's reimagining of frock coats, softening the structure with airy layers of lace, ruffles and flowers, signatures of a sartorially liberated collection. Tap the card for more.

The #DiorCouture Spring-Summer 2025 show opener was the first of several of Maria Grazia Chiuri's reimagining of frock coats, softening the structure with airy layers of lace, ruffles and flowers, signatures of a sartorially liberated collection. Tap the card for more.

Dior

42,402 次观看 • 1 年前

Colourful sketch/drawn energy shader. ✨🌈 The outlines resemble the 🌟 from 'Wish' (2023). This is all from various configs of the same shader-- Featuring multiple 'layers' (of hulls), so I can mix the results of various parameters realtime in #Unity3D. #gamedev #realtimevfx

Colourful sketch/drawn energy shader. ✨🌈 The outlines resemble the 🌟 from 'Wish' (2023). This is all from various configs of the same shader-- Featuring multiple 'layers' (of hulls), so I can mix the results of various parameters realtime in #Unity3D. #gamedev #realtimevfx

Mirza Beig

36,307 次观看 • 1 年前

CSS Trick! 🤙 What's powering this button effect? One property ⭐️ You can create the effect by placing a button over your content and using mix-blend-mode 🫶 button { mix-blend-mode: difference; 👈 position: fixed; } It's a really easy one to play around with and you can get some pretty interesting results. It certainly adds some visual interest. But, be careful with what images you use and try to make sure your text is still readable 🙏 CodePen.IO link below! 👇

CSS Trick! 🤙 What's powering this button effect? One property ⭐️ You can create the effect by placing a button over your content and using mix-blend-mode 🫶 button { mix-blend-mode: difference; 👈 position: fixed; } It's a really easy one to play around with and you can get some pretty interesting results. It certainly adds some visual interest. But, be careful with what images you use and try to make sure your text is still readable 🙏 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

177,830 次观看 • 2 年前