Загрузка видео...

Не удалось загрузить видео

На главную

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 просмотров • 3 месяцев назад

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,204 просмотров • 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 год назад

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 лет назад

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 год назад

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 просмотров • 11 месяцев назад

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 год назад