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.

the trick: CSS mask, ::before/::after, background-size, animation-delay, and translate 👇 happy holidays! 🤙🎄

jhey ʕ•ᴥ•ʔ

144,030 subscribers

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

Wissenschaft & Technologie Comedy Kunst

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von JustCurious

JustCuriousvor 1 Jahr

This is too serious man 🙌🏾🙌🏾🙌🏾

Profilbild von jhey ▲🐻🎈

jhey ▲🐻🎈vor 1 Jahr

squeezed in before the holidays kick 🤙 will hold back on posting demos and the likes for a few days 🎄 (but there's plenty in the backlog waiting 💀)

Profilbild von ΛNDRΞΛS MΛΤΤΞR

ΛNDRΞΛS MΛΤΤΞRvor 1 Jahr

thank you 4 all your powerfull inspirations throughout the year! you‘re work is absolutely fantastic! merry christmas 🎄🇺🇦🙏🏻

Profilbild von jhey ▲🐻🎈

jhey ▲🐻🎈vor 1 Jahr

merry christmas to you too 🙏🎄 you're more than welcome - here's to 2025

Profilbild von Gustavo

Gustavovor 1 Jahr

the trick: sorcery

Profilbild von Luis Sardon

Luis Sardonvor 1 Jahr

Amazing! Happy holidays!

Profilbild von S4RAH

S4RAHvor 1 Jahr

Very cool! Merry Christmas 🎄

Profilbild von PunGrumpy

PunGrumpyvor 1 Jahr

Oh my gat

Profilbild von Gustav Ekerot

Gustav Ekerotvor 1 Jahr

Nice one! happy holidays!

Profilbild von Ólafur Nils Sigurðsson

Ólafur Nils Sigurðssonvor 1 Jahr

Happy holidays!

Ähnliche Videos

Little CSS Christmas tree for the holidays 🎄 Powered by CSS custom properties 💪 ~100 lines of CSS The trick is in the animation-delay ✨ For example; <div class=🔴 style="--index: 2;"> .🔴 { animation-delay: calc(var(--index) * -0.2s); } CodePen.IO link below! 👇

Little CSS Christmas tree for the holidays 🎄 Powered by CSS custom properties 💪 ~100 lines of CSS The trick is in the animation-delay ✨ For example; <div class=🔴 style="--index: 2;"> .🔴 { animation-delay: calc(var(--index) * -0.2s); } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

374,796 Aufrufe • vor 3 Jahren

context-aware css card glow/shine effect 👨‍🍳 the trick: duplicate and scale the icon. translate it on pointermove. apply feGaussianBlur 🤙 check it 👇

context-aware css card glow/shine effect 👨‍🍳 the trick: duplicate and scale the icon. translate it on pointermove. apply feGaussianBlur 🤙 check it 👇

jhey ʕ•ᴥ•ʔ

840,618 Aufrufe • vor 7 Monaten

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

CSS logo marquee 1. bake the offset into your @keyframes 2. set animation-delay based on duration + item count @keyframes show { 0%, 73% { translate: -10px 30px; } 76%, 97% { translate: 0 0; } 100% { translate: 10px -30px; } } no need for JavaScript 🤙

jhey ʕ•ᴥ•ʔ

75,216 Aufrufe • vor 1 Jahr

The CSS trick here is using custom properties to drive your CSS animation behavior 🤙 Doesn't have to be a scroll animation li:nth-of-type(odd) { --x: -4ch; } li:nth-of-type(even) { --x: 4ch; } @keyframes shift {50% { translate: var(--x) 0; }} Updates at runtime 🚀

The CSS trick here is using custom properties to drive your CSS animation behavior 🤙 Doesn't have to be a scroll animation li:nth-of-type(odd) { --x: -4ch; } li:nth-of-type(even) { --x: 4ch; } @keyframes shift {50% { translate: var(--x) 0; }} Updates at runtime 🚀

jhey ʕ•ᴥ•ʔ

239,989 Aufrufe • vor 2 Jahren

$A CSS scroll version of the gooey island 🤙 .island { filter: url(#svg-goo); } .island__avatar { animation: hide; animation-timeline: scroll(); animation-range: 0 var(--header-size); transform-origin: 50% 0; } @keyframes hide { to { translate: -50% -80px; scale: 0.3; } }$

A CSS scroll version of the gooey island 🤙 .island { filter: url(#svg-goo); } .island__avatar { animation: hide; animation-timeline: scroll(); animation-range: 0 var(--header-size); transform-origin: 50% 0; } @keyframes hide { to { translate: -50% -80px; scale: 0.3; } }

jhey ʕ•ᴥ•ʔ

154,768 Aufrufe • vor 2 Jahren

CSS Trick! 🤙 You can create gradient borders on translucent elements using mask-clip and mask-composite with a pseudo-element 🔥 .gradient-border::after { mask-clip: padding-box, border-box; mask-composite: intersect; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); } It's the same "Transparent border trick" from before. But, now you apply it to a pseudo-element 😎 The trick is to create a pseudo-element with a gradient background and then mask it so we only see the part we want, the border ✨ mask-clip defines the area affected by a mask. Similar to how you can define background-size. Using padding-box and border-box constrains the two masks. mask-composite is the magic part ✨ It defines a compositing operation for stacked mask layers. Using intersect means that the parts that overlap get replaced. And this seems to work in all browsers 🙌 As for the rest of the styles... – Make sure you set pointer-events: none on the pseudo-element – Make sure it fills the parent element. You can use position: absolute and inset: 0 – Make sure the background fills the space including the border-width. You can use calc to achieve that: --bg-size: calc(100% + (2px * var(--border))); background: var(--gradient) center center / var(--bg-size) var(--bg-size); That's it! 🚀 Gradient borders on translucent elements. You can set all the backdrop-filter: blur() you like! 😅 CodePen.IO link below! 👇

CSS Trick! 🤙 You can create gradient borders on translucent elements using mask-clip and mask-composite with a pseudo-element 🔥 .gradient-border::after { mask-clip: padding-box, border-box; mask-composite: intersect; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); } It's the same "Transparent border trick" from before. But, now you apply it to a pseudo-element 😎 The trick is to create a pseudo-element with a gradient background and then mask it so we only see the part we want, the border ✨ mask-clip defines the area affected by a mask. Similar to how you can define background-size. Using padding-box and border-box constrains the two masks. mask-composite is the magic part ✨ It defines a compositing operation for stacked mask layers. Using intersect means that the parts that overlap get replaced. And this seems to work in all browsers 🙌 As for the rest of the styles... – Make sure you set pointer-events: none on the pseudo-element – Make sure it fills the parent element. You can use position: absolute and inset: 0 – Make sure the background fills the space including the border-width. You can use calc to achieve that: --bg-size: calc(100% + (2px * var(--border))); background: var(--gradient) center center / var(--bg-size) var(--bg-size); That's it! 🚀 Gradient borders on translucent elements. You can set all the backdrop-filter: blur() you like! 😅 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

269,739 Aufrufe • vor 2 Jahren

CSS only number slider using @property, round(), sin() and scroll-driven animation 🤙 @keyframes progress { to { --val: 100; }} .number-wheel { transform: rotateX(calc(var(--val) * -36deg)); } Watch for the trick reveal 👇

CSS only number slider using @property, round(), sin() and scroll-driven animation 🤙 @keyframes progress { to { --val: 100; }} .number-wheel { transform: rotateX(calc(var(--val) * -36deg)); } Watch for the trick reveal 👇

jhey ʕ•ᴥ•ʔ

372,646 Aufrufe • vor 1 Jahr

CSS multiplayer stack masking 🤙 – create a radial gradient circle mask that cuts out the previous disc – on :hover, transition mask of the sibling – let the background shine through the border space 🎉

CSS multiplayer stack masking 🤙 – create a radial gradient circle mask that cuts out the previous disc – on :hover, transition mask of the sibling – let the background shine through the border space 🎉

jhey ʕ•ᴥ•ʔ

122,529 Aufrufe • vor 1 Jahr

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

CSS placeholder shimmer effect ✨ – overlay a placeholder element – set aria-hidden and pointer-events: none – show when :placeholder-shown – visually hide actual :placeholder – use mask for the border – background-clip for the text 🤙 Check the debug 👇🎬

CSS placeholder shimmer effect ✨ – overlay a placeholder element – set aria-hidden and pointer-events: none – show when :placeholder-shown – visually hide actual :placeholder – use mask for the border – background-clip for the text 🤙 Check the debug 👇🎬

jhey ʕ•ᴥ•ʔ

152,812 Aufrufe • vor 1 Jahr

CSS Trick 📜 You can trigger text highlights on scroll with scroll-driven animations 😎 mark { animation: highlight; animation-timeline: view(); } @keyframes highlight { to { --lit: 1; }} mark span { background-position: calc(var(--lit) * -110%) 0; transition: background 1s; } The trick is using a scroll-driven animation to flip a custom property on a element 🎚️ You flip the value between 0 and 1, and that transitions the background position of the element mark { --lit: 0; animation: highlight steps(1) both; animation-timeline: view(); animation-range: entry 100% cover 10%; } The background has to be applied on a child of the mark to see the change in the custom property 👀 mark span { background: linear-gradient( 120deg, yellow 50%, transparent 50%) 110% 0 / 220% 100% no-repeat; background-position: calc(var(--lit) * 110%) 0; transition: background-position 1s; } The trick is to set the background-size so that it's bigger than the element and then split the background-color in the middle using a linear-gradient 🤙 And the property flips fills in the color 🫶 That's it! If there isn't support for scroll-driven animations, use JavaScript's IntersectionObserver API. The code for this is in the demo 😎 Cool example of using CSS as an IntersectionObserver! CodePen.IO link below 👇

CSS Trick 📜 You can trigger text highlights on scroll with scroll-driven animations 😎 mark { animation: highlight; animation-timeline: view(); } @keyframes highlight { to { --lit: 1; }} mark span { background-position: calc(var(--lit) * -110%) 0; transition: background 1s; } The trick is using a scroll-driven animation to flip a custom property on a element 🎚️ You flip the value between 0 and 1, and that transitions the background position of the element mark { --lit: 0; animation: highlight steps(1) both; animation-timeline: view(); animation-range: entry 100% cover 10%; } The background has to be applied on a child of the mark to see the change in the custom property 👀 mark span { background: linear-gradient( 120deg, yellow 50%, transparent 50%) 110% 0 / 220% 100% no-repeat; background-position: calc(var(--lit) * 110%) 0; transition: background-position 1s; } The trick is to set the background-size so that it's bigger than the element and then split the background-color in the middle using a linear-gradient 🤙 And the property flips fills in the color 🫶 That's it! If there isn't support for scroll-driven animations, use JavaScript's IntersectionObserver API. The code for this is in the demo 😎 Cool example of using CSS as an IntersectionObserver! CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

208,251 Aufrufe • vor 2 Jahren

classic CSS trick for gradient border with blurred backdrop 👉 pseudoelement + mask-composite check the exploded view video 👇

classic CSS trick for gradient border with blurred backdrop 👉 pseudoelement + mask-composite check the exploded view video 👇

jhey ʕ•ᴥ•ʔ

28,685 Aufrufe • vor 1 Jahr

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

dissolving text input with SVG noise + CSS filter, displace + mask duplicate layer whilst clipping the original 🤙 check the exploded view 👇

dissolving text input with SVG noise + CSS filter, displace + mask duplicate layer whilst clipping the original 🤙 check the exploded view 👇

jhey ʕ•ᴥ•ʔ

43,682 Aufrufe • vor 1 Jahr

you can create this dynamic mask using a progressive CSS scroll-driven animation 🧑‍🍳 the gist 👇 input { animation: in; animation-timeline: scroll(self inline); animation-range: 0 6ch; mask-position: 0 0; } @keyframes in { 0% { mask-position: -6ch 0; }}

you can create this dynamic mask using a progressive CSS scroll-driven animation 🧑‍🍳 the gist 👇 input { animation: in; animation-timeline: scroll(self inline); animation-range: 0 6ch; mask-position: 0 0; } @keyframes in { 0% { mask-position: -6ch 0; }}

jhey ʕ•ᴥ•ʔ

126,068 Aufrufe • vor 1 Jahr

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

Future CSS Tip! 🔮 You can power list animations like you would using IntersectionObserver with CSS scroll-driven animations and zero JS 🤯 el { animation: show; animation-timeline: view(); animation-range: entry; } keyframes show {0%{translate:0 50%;}} CodePen.IO link below! 👇

Future CSS Tip! 🔮 You can power list animations like you would using IntersectionObserver with CSS scroll-driven animations and zero JS 🤯 el { animation: show; animation-timeline: view(); animation-range: entry; } keyframes show {0%{translate:0 50%;}} CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

433,664 Aufrufe • vor 2 Jahren

CSS Trick! 🎃 You can create a wavey border for elements by layering masks 🎭 Used to create this ghost! 👻 Check the video for an exploding view 🫶 .👻 { --size: 20px; mask: radial-gradient(var(--size) at bottom, transparent 97%, #000), radial-gradient(var(--size) at 25% 50%, #000 97%, transparent); mask-repeat: repeat-x; mask-size: calc(2 * var(--size)) 100%, calc(4 * var(--size)) calc(2 * var(--size)); mask-position: 50% calc(100% - var(--size)), calc(50% - var(--size)) 99%; } That code looks kinda scary! 👻 This is one way you could do things. Check the video again or explode in the demo. One mask cuts out circles from the bottom of the element. The other adds overlaid circles back. And that overlap creates the wavey line you want for the ghost 🤙 Using a custom property you can write once and not have to touch again. Update the custom property to update the wave size as shown in the video 🎬 The last piece of the puzzle is animating the mask-position to create that animation @ keyframes flow { to { mask-position: calc(50% + (var(--size) * 4)) calc(100% - var(--size)), calc((50% - var(--size)) + (var(--size) * 4)) 99%; } } If you play with the demo, you may find some Easter eggs! Shake the ghost and double-tap it 😉 Happy Halloween! 🎃 CodePen.IO link below! 👇

CSS Trick! 🎃 You can create a wavey border for elements by layering masks 🎭 Used to create this ghost! 👻 Check the video for an exploding view 🫶 .👻 { --size: 20px; mask: radial-gradient(var(--size) at bottom, transparent 97%, #000), radial-gradient(var(--size) at 25% 50%, #000 97%, transparent); mask-repeat: repeat-x; mask-size: calc(2 * var(--size)) 100%, calc(4 * var(--size)) calc(2 * var(--size)); mask-position: 50% calc(100% - var(--size)), calc(50% - var(--size)) 99%; } That code looks kinda scary! 👻 This is one way you could do things. Check the video again or explode in the demo. One mask cuts out circles from the bottom of the element. The other adds overlaid circles back. And that overlap creates the wavey line you want for the ghost 🤙 Using a custom property you can write once and not have to touch again. Update the custom property to update the wave size as shown in the video 🎬 The last piece of the puzzle is animating the mask-position to create that animation @ keyframes flow { to { mask-position: calc(50% + (var(--size) * 4)) calc(100% - var(--size)), calc((50% - var(--size)) + (var(--size) * 4)) 99%; } } If you play with the demo, you may find some Easter eggs! Shake the ghost and double-tap it 😉 Happy Halloween! 🎃 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

181,442 Aufrufe • vor 2 Jahren

Future CSS Tip! 🔮 You can create this scrolling image pop-out effect with CSS scroll-driven animations and zero JS! 🔥 .pop { view-timeline-name: --pop; } img { animation: slide both; animation-timeline: --pop; animation-range: entry 100% cover 50%; } .skateboarder { --x: 0; --y: -45%; } @ keyframes slide { to { translate: var(--x) var(--y); } } The "trick" is to layer up two image elements and keep one clipped by the container 🤙 Slide them both together and it will look like one pops out of the container 🎈 You can leverage scoped custom properties to translate by different distances too! 😎 You can use macOS's built-in image background removal tool to get the pop-out image ✨ And for added effect, you can animate the brightness on that to make it stand out ⭐️ CodePen.IO link below! 👇

Future CSS Tip! 🔮 You can create this scrolling image pop-out effect with CSS scroll-driven animations and zero JS! 🔥 .pop { view-timeline-name: --pop; } img { animation: slide both; animation-timeline: --pop; animation-range: entry 100% cover 50%; } .skateboarder { --x: 0; --y: -45%; } @ keyframes slide { to { translate: var(--x) var(--y); } } The "trick" is to layer up two image elements and keep one clipped by the container 🤙 Slide them both together and it will look like one pops out of the container 🎈 You can leverage scoped custom properties to translate by different distances too! 😎 You can use macOS's built-in image background removal tool to get the pop-out image ✨ And for added effect, you can animate the brightness on that to make it stand out ⭐️ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

634,384 Aufrufe • vor 2 Jahren