Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 görüntüleme • 1 yıl önce •via X (Twitter)

SanatBilim & TeknolojiEğitim
LIVE

Anya Rossi• Live Now

Private livecam show

11 Yorum

Nishanth b profil fotoğrafı
Nishanth b1 yıl önce

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 profil fotoğrafı
Anima1 yıl önce

📢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 profil fotoğrafı
Al1 yıl önce

Looks great dude ^ this package does something similar

jhey ▲🐻🎈 profil fotoğrafı
jhey ▲🐻🎈1 yıl önce

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 profil fotoğrafı
daniel1 yıl önce

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

MuTe profil fotoğrafı
MuTe1 yıl önce

How do you even learn to make this 😭

Carlos M. profil fotoğrafı
Carlos M.1 yıl önce

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

Yoann Gueny profil fotoğrafı
Yoann Gueny1 yıl önce

Looks like some kind of pokemon card effect

raymondreamer profil fotoğrafı
raymondreamer1 yıl önce

too good

Sam Denty profil fotoğrafı
Sam Denty1 yıl önce

That looks crazy 🔥

md profil fotoğrafı
md1 yıl önce

😍

Benzer Videolar

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 görüntüleme • 1 yıl önce

Live2D parallax background * tutorial *
2:05

Live2D parallax background * tutorial *

Arthur Dreamur 🇻🇪 Live2D COMMISIONS OPEN

10,742 görüntüleme • 6 ay önce

Blend Text to Background
0:23

Blend Text to Background

Photoshop Tricks!

46,515 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 4 ay önce

How to change background image
0:54

How to change background image

Photoshop Tricks!

15,282 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 1 yıl önce

😎👋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 görüntüleme • 3 yıl önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 1 yıl önce

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

Courtesy Incognito Incognito for video and background sound effects

shiv_cybersurg

39,676 görüntüleme • 1 yıl önce

Easily Remove Background from Any Image in Photoshop
0:42

Easily Remove Background from Any Image in Photoshop

Photoshop Tricks!

44,179 görüntüleme • 1 yıl önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 1 yıl önce