Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

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

jhey ʕ•ᴥ•ʔ

144,204 subscribers

42,712 Aufrufe • vor 1 Jahr •via X (Twitter)

Kunst Wissenschaft & Technologie Bildung

Anya Rossi• Live Now

Private livecam show

11 Kommentare

Profilbild von Nishanth b

Nishanth bvor 1 Jahr

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

Profilbild von Anima

Animavor 1 Jahr

📢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."-->

Profilbild von Al

Alvor 1 Jahr

Looks great dude ^ this package does something similar

Profilbild von jhey ▲🐻🎈

jhey ▲🐻🎈vor 1 Jahr

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

Profilbild von daniel

danielvor 1 Jahr

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

Profilbild von MuTe

MuTevor 1 Jahr

How do you even learn to make this 😭

Profilbild von Carlos M.

Carlos M.vor 1 Jahr

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

Profilbild von Yoann Gueny

Yoann Guenyvor 1 Jahr

Looks like some kind of pokemon card effect

Profilbild von raymondreamer

raymondreamervor 1 Jahr

too good

Profilbild von Sam Denty

Sam Dentyvor 1 Jahr

That looks crazy 🔥

Profilbild von md

mdvor 1 Jahr

😍

Ähnliche Videos

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 Aufrufe • vor 1 Jahr

Live2D parallax background * tutorial *

Live2D parallax background * tutorial *

Arthur Dreamur 🇻🇪 Live2D COMMISIONS OPEN

10,742 Aufrufe • vor 6 Monaten

Blend Text to Background

Blend Text to Background

Photoshop Tricks!

46,515 Aufrufe • vor 1 Jahr

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 🚀

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 Aufrufe • vor 1 Jahr

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.

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 Aufrufe • vor 4 Monaten

How to change background image

How to change background image

Photoshop Tricks!

15,282 Aufrufe • vor 1 Jahr

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

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

jhey ʕ•ᴥ•ʔ

64,029 Aufrufe • vor 1 Jahr

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

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

jhey ʕ•ᴥ•ʔ

272,683 Aufrufe • vor 2 Jahren

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

Alfon

39,397 Aufrufe • vor 1 Jahr

😎👋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

😎👋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 Aufrufe • vor 3 Jahren

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 👇

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 Aufrufe • vor 2 Jahren

How to Blend Background Colors of photos taken in the Studio

How to Blend Background Colors of photos taken in the Studio

Photoshop Tricks!

60,109 Aufrufe • vor 1 Jahr

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 ✨

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 Aufrufe • vor 1 Jahr

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.

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 Aufrufe • vor 1 Jahr

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

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

jhey ʕ•ᴥ•ʔ

495,678 Aufrufe • vor 2 Jahren

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 🤙

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 Aufrufe • vor 1 Jahr

Courtesy Incognito Incognito for video and background sound effects

Courtesy Incognito Incognito for video and background sound effects

shiv_cybersurg

39,676 Aufrufe • vor 1 Jahr

Easily Remove Background from Any Image in Photoshop

Easily Remove Background from Any Image in Photoshop

Photoshop Tricks!

44,179 Aufrufe • vor 1 Jahr

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

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 Aufrufe • vor 2 Jahren

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.

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 Aufrufe • vor 1 Jahr