正在加载视频...

视频加载失败

返回首页

breakin' down classics CSS background-image + background-blend-mode + custom properties = holo-like effects with parallax ✨

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

144,204 subscribers

42,712 次观看 • 1 年前 •via X (Twitter)

艺术科学技术教育
LIVE

Anya Rossi• Live Now

Private livecam show

11 条评论

Nishanth b 的头像
Nishanth b1 年前

Hmm really cool 🌟 I was working on some blending mode issue, maybe you know any trick to solve this? I was looking if there is any blend modee to solve this

Anima 的头像
Anima1 年前

📢It is live! @figma design to @MUI_hq or @AntDesignUI "Whether your design is well organized or a bit chaotic, using standard components or none, Anima takes it all and translates it into high-quality #MUI or #AntDesign code."-->

Al 的头像
Al1 年前

Looks great dude ^ this package does something similar

jhey ▲🐻🎈 的头像
jhey ▲🐻🎈1 年前

it's finding the right background-image + blend combo that's tricky for this stuff IMO 🫣 the parallax part is easy enough 🤙 wrote about it a few years back

daniel 的头像
daniel1 年前

Could be an amazing feature for digital wallets and identities or digital concert tickets!

MuTe 的头像
MuTe1 年前

How do you even learn to make this 😭

Carlos M. 的头像
Carlos M.1 年前

Feel like a holographic Pokémon card. So nostalgic!

Yoann Gueny 的头像
Yoann Gueny1 年前

Looks like some kind of pokemon card effect

raymondreamer 的头像
raymondreamer1 年前

too good

Sam Denty 的头像
Sam Denty1 年前

That looks crazy 🔥

md 的头像
md1 年前

😍

相关视频

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 ✂️
0:30

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 年前

Live2D parallax background * tutorial *
2:05

Live2D parallax background * tutorial *

Arthur Dreamur 🇻🇪 Live2D COMMISIONS OPEN

10,742 次观看 • 6 个月前

Blend Text to Background
0:23

Blend Text to Background

Photoshop Tricks!

46,515 次观看 • 1 年前

works great on blocks of text too 🤙 .text { --duration: calc(var(--text-length) * 0.12s); animation: shimmer var(--duration) infinite; } @​keyframes shimmer { 0% { background-position: 100% 0; } } animation-duration maps to the text length using CSS custom properties 🚀
0:39

works great on blocks of text too 🤙 .text { --duration: calc(var(--text-length) * 0.12s); animation: shimmer var(--duration) infinite; } @​keyframes shimmer { 0% { background-position: 100% 0; } } animation-duration maps to the text length using CSS custom properties 🚀

jhey ʕ•ᴥ•ʔ

100,165 次观看 • 1 年前

Easily add a color mode switch with a couple prompts. 🎨 Utilizing Gemini 3 Flash in Antigravity: It replaced hex strings, removed inline styles, implemented CSS custom properties, and added persistent dark/light mode to the website.
0:54

Easily add a color mode switch with a couple prompts. 🎨 Utilizing Gemini 3 Flash in Antigravity: It replaced hex strings, removed inline styles, implemented CSS custom properties, and added persistent dark/light mode to the website.

Google Antigravity

54,672 次观看 • 4 个月前

How to change background image
0:54

How to change background image

Photoshop Tricks!

15,282 次观看 • 1 年前

it's all about easing curves ⏱️ translation powered via CSS custom properties
0:20

it's all about easing curves ⏱️ translation powered via CSS custom properties

jhey ʕ•ᴥ•ʔ

64,029 次观看 • 1 年前

Want to debug device-controlled CSS parallax effects without using a device? Simulate device orientation in Chrome DevTools 👇
0:27

Want to debug device-controlled CSS parallax effects without using a device? Simulate device orientation in Chrome DevTools 👇

jhey ʕ•ᴥ•ʔ

272,683 次观看 • 2 年前

Making a ✨stacked✨ avatar list using maskImage. Works against any transparent background!! Using Tailwind CSS v4. Recorded and edited using
1:14

Making a ✨stacked✨ avatar list using maskImage. Works against any transparent background!! Using Tailwind CSS v4. Recorded and edited using

Alfon

39,397 次观看 • 1 年前

😎👋As promised, I've recreated it on @codepen ✨ I loved making it & animating the gradients🌈 Using: - CSS keyframes ✅ - CSS custom properties ✅ - CSS variables ✅ - NO JS ❌ Link: CrossBrowser incoming ➡️ #css #FrontEndDev
0:26

😎👋As promised, I've recreated it on @codepen ✨ I loved making it & animating the gradients🌈 Using: - CSS keyframes ✅ - CSS custom properties ✅ - CSS variables ✅ - NO JS ❌ Link: CrossBrowser incoming ➡️ #css #FrontEndDev

Luky - A$AP Luky

103,277 次观看 • 3 年前

Future CSS Tip! 🔮 You can create responsive animated text reveals with CSS scroll-driven animations 🔥 section { /* The red element in the video */ view-timeline-name: --section; } p { animation: fill both linear; animation-timeline: --section; animation-range: cover; } keyframes fill { to { --fill: 1; } } No JavaScript required with this trick 😎 What's happening there then? Well, we're animating a custom property value using @ property. @ property --fill { initial-value: 0; syntax: ' '; inherits: true; } Then the trick is background clipping the text and filling it with a multiline background by animating the background-position to fill the text 🤓 span { background-position-x: calc(-100vmax + (var(--progress) * 100vmax)); background-clip: text; color: transparent; } CodePen.IO link below 👇
1:10

Future CSS Tip! 🔮 You can create responsive animated text reveals with CSS scroll-driven animations 🔥 section { /* The red element in the video */ view-timeline-name: --section; } p { animation: fill both linear; animation-timeline: --section; animation-range: cover; } keyframes fill { to { --fill: 1; } } No JavaScript required with this trick 😎 What's happening there then? Well, we're animating a custom property value using @ property. @ property --fill { initial-value: 0; syntax: ' '; inherits: true; } Then the trick is background clipping the text and filling it with a multiline background by animating the background-position to fill the text 🤓 span { background-position-x: calc(-100vmax + (var(--progress) * 100vmax)); background-clip: text; color: transparent; } CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

408,585 次观看 • 2 年前

How to Blend Background Colors of photos taken in the Studio
0:35

How to Blend Background Colors of photos taken in the Studio

Photoshop Tricks!

60,109 次观看 • 1 年前

negative position: sticky + line height units + background-attachment 👨‍🍳 you can achieve a lot with a good grasp of CSS fundamentals bonus: progressively enhance with scroll-driven animation ✨
0:38

negative position: sticky + line height units + background-attachment 👨‍🍳 you can achieve a lot with a good grasp of CSS fundamentals bonus: progressively enhance with scroll-driven animation ✨

jhey ʕ•ᴥ•ʔ

134,905 次观看 • 1 年前

Worked on this little prototype over the weekend. A custom dock and a little blast from the past. Features include: - Hide Finder. - Set custom background image. - Set custom app icons for all apps.
0:35

Worked on this little prototype over the weekend. A custom dock and a little blast from the past. Features include: - Hide Finder. - Set custom background image. - Set custom app icons for all apps.

Ras✦Maus

37,944 次观看 • 1 年前

Parallax cards with masked blurs v2 ✨ – DeviceOrientation – Progressive blur/masked layers with CSS sin() – Adapts to landscape with media queries 🤙
0:36

Parallax cards with masked blurs v2 ✨ – DeviceOrientation – Progressive blur/masked layers with CSS sin() – Adapts to landscape with media queries 🤙

jhey ʕ•ᴥ•ʔ

495,678 次观看 • 2 年前

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 🤙
0:25

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 🤙

jhey ʕ•ᴥ•ʔ

108,894 次观看 • 1 年前

Courtesy Incognito Incognito for video and background sound effects
0:29

Courtesy Incognito Incognito for video and background sound effects

shiv_cybersurg

39,676 次观看 • 1 年前

Easily Remove Background from Any Image in Photoshop
0:42

Easily Remove Background from Any Image in Photoshop

Photoshop Tricks!

44,179 次观看 • 1 年前

Future CSS Tip! 🍏 You can combine scroll-driven animations with background-clip to create gradient text reveals 😍 p { animation-name: move-bg, fade-in; animation-fill-mode: both; animation-timing-function: linear; animation-timeline: scroll(root); animation-range: 0 100vh, 40vh 100vh; } /* Multiple animations with shared timeline and different ranges 👀 */ keyframes move-bg { to { background-position: 50% 100%; } } keyframes fade-in { 0% { opacity: 0; } } The trick here is creating a large background with a radial gradient and using background-clip: text on the element with color: transparent ✨ p { background: radial-gradient(50% 100% at 50% 100%, hsl(var(--accent, 10) 90% 95%), hsl(var(--accent, 10) 90% 50%), transparent 50%); background-size: 400% 600%; -webkit-background-clip: text; background-position: 50% 0; } Then we animate the background-position to reveal the colorful part that reveal the text 😎 Another #AppleEvent related scrolling demo coming tomorrow 😅 CodePen.IO link below! 👇
0:26

Future CSS Tip! 🍏 You can combine scroll-driven animations with background-clip to create gradient text reveals 😍 p { animation-name: move-bg, fade-in; animation-fill-mode: both; animation-timing-function: linear; animation-timeline: scroll(root); animation-range: 0 100vh, 40vh 100vh; } /* Multiple animations with shared timeline and different ranges 👀 */ keyframes move-bg { to { background-position: 50% 100%; } } keyframes fade-in { 0% { opacity: 0; } } The trick here is creating a large background with a radial gradient and using background-clip: text on the element with color: transparent ✨ p { background: radial-gradient(50% 100% at 50% 100%, hsl(var(--accent, 10) 90% 95%), hsl(var(--accent, 10) 90% 50%), transparent 50%); background-size: 400% 600%; -webkit-background-clip: text; background-position: 50% 0; } Then we animate the background-position to reveal the colorful part that reveal the text 😎 Another #AppleEvent related scrolling demo coming tomorrow 😅 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

180,112 次观看 • 2 年前

You can now generate videos on This is what I've been using to create my background videos. It's using Runway with a midjourney image. Add prompts like zoom, effects, environments to make the image come to life. Combined with scripting and voices, it's incredibly easy to create shorts or just add b-rolls.
0:43

You can now generate videos on This is what I've been using to create my background videos. It's using Runway with a midjourney image. Add prompts like zoom, effects, environments to make the image come to life. Combined with scripting and voices, it's incredibly easy to create shorts or just add b-rolls.

Meng To

50,500 次观看 • 1 年前