Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

Didn't need JavaScript for this one 🤙 The 3D exploded view is powered by CSS :has() && custom properties 😎 :root:has(#explode:checked) { --explode: 1; } .slides { scale: calc(1 - (var(--explode) * 0.55)); transform: rotateX(calc(var(--explode) * -24deg))...; } Use scope ⭐️

jhey ʕ•ᴥ•ʔ

147,491 subscribers

96,213 views • 2 years ago •via X (Twitter)

Arts Science & Technology

Anya Rossi• Live Now

Private livecam show

11 Comments

655CAPITAL2 years ago

Wtf you always showing the impossible possible with just css

Safari Web Extensions2 years ago

Discover the top Safari web extensions to boost productivity, enhance workflow, and customize your browsing experience on Mac, iOS, and iPadOS.

Trevor2 years ago

You're a literal magician

Action No Be2 years ago

@mista_ia

Taeho2 years ago

🫢

ROI Runner2 years ago

Looks realy fresh

Mia Miller2 years ago

This looks amazing

Yuvaraj2 years ago

Bro, are u for real🤯

Peter Mekhaeil2 years ago

What is this magic 🤩

robih2 years ago

crazy

Sam Elliott2 years ago

🤯🤯🤯🤯🤯

Related Videos

neat trick for the sheet effect by transforming the body with CSS when you have :popover-open ✨ :root:has(.drawer:popover-open) body { scale: calc(0.95 + (var(--c) * 0.05)); translate: 0 calc(.875rem * (1 - var(--c)); } [popover] isn't affected as it's in the :top-layer 🚀

neat trick for the sheet effect by transforming the body with CSS when you have :popover-open ✨ :root:has(.drawer:popover-open) body { scale: calc(0.95 + (var(--c) * 0.05)); translate: 0 calc(.875rem * (1 - var(--c)); } [popover] isn't affected as it's in the :top-layer 🚀

jhey ʕ•ᴥ•ʔ

77,988 views • 2 years ago

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 ʕ•ᴥ•ʔ

373,014 views • 2 years ago

CSS Tip! 🤙 Use custom properties to work out the nested radius of elements for you 😎 .parent { --nested-radius: calc(var(--radius) - var(--padding)); } .nested { border-radius: var(--nested-radius); } Couldn't resist making an interactive visual! CodePen.IO link below 👇

CSS Tip! 🤙 Use custom properties to work out the nested radius of elements for you 😎 .parent { --nested-radius: calc(var(--radius) - var(--padding)); } .nested { border-radius: var(--nested-radius); } Couldn't resist making an interactive visual! CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

795,795 views • 3 years ago

3D CSS image slider works well on device 🤙 li { --item-width: clamp(120px, 20vmin, 12rem); --radius: calc( (var(--item-width) / sin(var(--inner-angle))) * -1 ); } It's cool how you can use a clamped value with "calc"

3D CSS image slider works well on device 🤙 li { --item-width: clamp(120px, 20vmin, 12rem); --radius: calc( (var(--item-width) / sin(var(--inner-angle))) * -1 ); } It's cool how you can use a clamped value with "calc"

jhey ʕ•ᴥ•ʔ

173,088 views • 2 years ago

CSS Trick ⚡️ (˗ˏˋ rogie ˎˊ˗ challenge edition 🤙) You can create this secret code reveal with only CSS using :has() and trig functions 🔥 .digit::hover + .digit, .digit:has(+ .digit:hover) { --active: var(--lerp-1); } :root { --lerp-1: calc(sin(50deg)); } .digit { scale: calc(var(--active) + 0.5); } There are a couple of moving parts. The first thing we can do is set up a scale. :root { --lerp-0: 1; /* === sin(90deg) */ --lerp-1: calc(sin(50deg)); --lerp-2: calc(sin(45deg)); --lerp-3: calc(sin(35deg)); --lerp-4: calc(sin(25deg)); --lerp-5: calc(sin(15deg)); } The digit styles define scale and blur. They also dictate the transition duration .digit { transition: scale calc(((1 - var(--active, 0)) + 0.2) * 1s); } When a digit is hovered, then you can set the --active custom property based on the digit position 🤙 The digit that is hovered. .digit:hover { --active: var(--lerp-0); } And the digit on either side of that hovered digit .digit:is(:hover, :focus-visible) + .digit, .digit:has(+ .digit:is(:hover, :focus-visible)) { --active: var(--lerp-1); } We can select the previous sibling using :has() and the next sibling with the sibling combinator (+) And that's it! ⭐️ That's how you create these hover scale interactions with CSS 🙌 We're jus' waiting on Firefox for :has() support. When that lands, it'll likely break the internet 😅 CodePen.IO link below! 👇

CSS Trick ⚡️ (˗ˏˋ rogie ˎˊ˗ challenge edition 🤙) You can create this secret code reveal with only CSS using :has() and trig functions 🔥 .digit::hover + .digit, .digit:has(+ .digit:hover) { --active: var(--lerp-1); } :root { --lerp-1: calc(sin(50deg)); } .digit { scale: calc(var(--active) + 0.5); } There are a couple of moving parts. The first thing we can do is set up a scale. :root { --lerp-0: 1; /* === sin(90deg) / --lerp-1: calc(sin(50deg)); --lerp-2: calc(sin(45deg)); --lerp-3: calc(sin(35deg)); --lerp-4: calc(sin(25deg)); --lerp-5: calc(sin(15deg)); } The digit styles define scale and blur. They also dictate the transition duration .digit { transition: scale calc(((1 - var(--active, 0)) + 0.2) 1s); } When a digit is hovered, then you can set the --active custom property based on the digit position 🤙 The digit that is hovered. .digit:hover { --active: var(--lerp-0); } And the digit on either side of that hovered digit .digit:is(:hover, :focus-visible) + .digit, .digit:has(+ .digit:is(:hover, :focus-visible)) { --active: var(--lerp-1); } We can select the previous sibling using :has() and the next sibling with the sibling combinator (+) And that's it! ⭐️ That's how you create these hover scale interactions with CSS 🙌 We're jus' waiting on Firefox for :has() support. When that lands, it'll likely break the internet 😅 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

375,402 views • 3 years ago

Animated img carousel 🤙 Use CSS trig functions to get radius and layout images as a cylinder 🤓 Use scroll animation to rotate the cylinder 📜 :root { --a: calc((360 / var(--total)) * 1deg); --r: calc((var(--item-width) / sin(var(--a))) * -1); } Explained 👇

Animated img carousel 🤙 Use CSS trig functions to get radius and layout images as a cylinder 🤓 Use scroll animation to rotate the cylinder 📜 :root { --a: calc((360 / var(--total)) * 1deg); --r: calc((var(--item-width) / sin(var(--a))) * -1); } Explained 👇

jhey ʕ•ᴥ•ʔ

352,477 views • 2 years ago

CSS Tip! 🤙 You could use CSS :has() to power a context-aware custom cursor experience 👆 :root:has(.player:hover) {--active: 1;} .cursor {scale: var(--active);} :root:has(.player:hover > [aria-label="Pause"]) .cursor-pause-icon { display: block; } CodePen.IO link below! 👇

CSS Tip! 🤙 You could use CSS :has() to power a context-aware custom cursor experience 👆 :root:has(.player:hover) {--active: 1;} .cursor {scale: var(--active);} :root:has(.player:hover > [aria-label="Pause"]) .cursor-pause-icon { display: block; } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

262,102 views • 3 years ago

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 ʕ•ᴥ•ʔ

307,288 views • 1 year ago

CSS Trick 🎞️ You can create an infinite marquee/carousel animation without duplicate items 🤙 li { --destination: calc(var(--idx) * -100%); } @keyframes slide { to { translate: var(--destination) 0;}} Animate the items, not the list 😎 Here's the next ! 👇 The main trick here is animating the items and not the list. You can lean into custom properties to work out the origin and destination of an item. Inline some custom properties on the list and the items. Then use these to calculate the origin and the destination for each item in the list ⭐️ li { --origin: calc((var(--count) - var(--index)) * 100%); --destination: calc((var(--index) + 1) * -100%); } The last piece is hooking up the animation li { --duration: calc(var(--speed) * 1s); --delay: calc( (var(--duration) / var(--count)) * var(--index, 0) ); animation: slide var(--duration) calc(var(--delay) - (var(--count) * 0.5s)) infinite linear; } The important part here is using those custom properties to define and calculate the animation properties for the items in the list 🤙 It's hard to cover everyone's use case in one demo 😅 But we try 🙏 As always, any requests, suggestions, questions, etc. Hit me up! 🤙 CodePen.IO link below 👇 p.s Can anyone recommend a decent lavalier microphone so I can record these better on the road 😭

CSS Trick 🎞️ You can create an infinite marquee/carousel animation without duplicate items 🤙 li { --destination: calc(var(--idx) * -100%); } @keyframes slide { to { translate: var(--destination) 0;}} Animate the items, not the list 😎 Here's the next ! 👇 The main trick here is animating the items and not the list. You can lean into custom properties to work out the origin and destination of an item. Inline some custom properties on the list and the items. Then use these to calculate the origin and the destination for each item in the list ⭐️ li { --origin: calc((var(--count) - var(--index)) * 100%); --destination: calc((var(--index) + 1) * -100%); } The last piece is hooking up the animation li { --duration: calc(var(--speed) * 1s); --delay: calc( (var(--duration) / var(--count)) * var(--index, 0) ); animation: slide var(--duration) calc(var(--delay) - (var(--count) * 0.5s)) infinite linear; } The important part here is using those custom properties to define and calculate the animation properties for the items in the list 🤙 It's hard to cover everyone's use case in one demo 😅 But we try 🙏 As always, any requests, suggestions, questions, etc. Hit me up! 🤙 CodePen.IO link below 👇 p.s Can anyone recommend a decent lavalier microphone so I can record these better on the road 😭

jhey ʕ•ᴥ•ʔ

233,599 views • 2 years ago

Love messin' with these UI patterns 🤙 li:hover { --active: 1; } li img { position: fixed; left: calc(var(--x) * 1px); top: calc(var(--y) * 1px); opacity: var(--active, 0); } Pass the --x/y in on pointermove for the list ⭐️

Love messin' with these UI patterns 🤙 li:hover { --active: 1; } li img { position: fixed; left: calc(var(--x) * 1px); top: calc(var(--y) * 1px); opacity: var(--active, 0); } Pass the --x/y in on pointermove for the list ⭐️

jhey ʕ•ᴥ•ʔ

57,853 views • 2 years ago

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,528 views • 3 years ago

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 ʕ•ᴥ•ʔ

375,102 views • 3 years ago

Extra CSS Trick! 🚀 Use scroll-padding-inline with some calc on the track to make the indicator click JS free 🤙 (See video 🎬) ul { scroll-behavior: smooth; scroll-padding-inline: calc( 50vw - (var(--card-width) * 0.5 ); } You could color those indicators as requested by 🚨 abelardoit 🚨 .indicator::after { background: hsl(var(--hue) 90% 70%); } @keyframes show { 50% { opacity: 1; }} Combined with the same animation properties from the original demo ⭐️ Rad! 😎

Extra CSS Trick! 🚀 Use scroll-padding-inline with some calc on the track to make the indicator click JS free 🤙 (See video 🎬) ul { scroll-behavior: smooth; scroll-padding-inline: calc( 50vw - (var(--card-width) * 0.5 ); } You could color those indicators as requested by 🚨 abelardoit 🚨 .indicator::after { background: hsl(var(--hue) 90% 70%); } @keyframes show { 50% { opacity: 1; }} Combined with the same animation properties from the original demo ⭐️ Rad! 😎

jhey ʕ•ᴥ•ʔ

95,305 views • 2 years ago

exploded views with CSS grid + 3D transforms 🤙 [data-explode=true] .layer { translate: 0 0 2rem; } .layer:hover .shadow { opacity: 1 } .shadow:has(+ .layer:hover) { opacity: 0.2; } leverage the cascade 🤌

exploded views with CSS grid + 3D transforms 🤙 [data-explode=true] .layer { translate: 0 0 2rem; } .layer:hover .shadow { opacity: 1 } .shadow:has(+ .layer:hover) { opacity: 0.2; } leverage the cascade 🤌

jhey ʕ•ᴥ•ʔ

273,366 views • 1 year ago

Must be time for the Q4 nested radius post 📅 Remember, the CSS tip is that you can use custom properties to work out the nested radius of elements for you 😎 .panel { --radius: 28px; --padding: 8px; --nested-radius: calc(var(--radius) - var(--padding); } .content { border-radius: var(--nested-radius); } Here's an interactive visual you can mess with 🤙 CodePen.IO link below 👇

Must be time for the Q4 nested radius post 📅 Remember, the CSS tip is that you can use custom properties to work out the nested radius of elements for you 😎 .panel { --radius: 28px; --padding: 8px; --nested-radius: calc(var(--radius) - var(--padding); } .content { border-radius: var(--nested-radius); } Here's an interactive visual you can mess with 🤙 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

533,123 views • 3 years ago

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 ʕ•ᴥ•ʔ

123,254 views • 2 years ago

CSS scroll to unblur text ✨ .word { --start: calc(var(--i) * var(--pxPerWord)); --end: calc((var(--i) + 1) * var(--pxPerWord)); animation: fx; animation-timeline: --section; animation-range: var(--start) var(--end); } @keyframes fx { 0% { filter: blur(20px); opacity: 0; }}

CSS scroll to unblur text ✨ .word { --start: calc(var(--i) * var(--pxPerWord)); --end: calc((var(--i) + 1) * var(--pxPerWord)); animation: fx; animation-timeline: --section; animation-range: var(--start) var(--end); } @keyframes fx { 0% { filter: blur(20px); opacity: 0; }}

jhey ʕ•ᴥ•ʔ

121,946 views • 2 years ago

Not many lines for a CSS parallax effect either 🤙 ul { scroll-padding-inline: calc(50% - var(-card) * 0.5); } img { animation: para; animation-timeline: --item; } @keyframes para { cover 100% { translate: calc(100% - var(--card)) -50%; }}

Not many lines for a CSS parallax effect either 🤙 ul { scroll-padding-inline: calc(50% - var(-card) * 0.5); } img { animation: para; animation-timeline: --item; } @keyframes para { cover 100% { translate: calc(100% - var(--card)) -50%; }}

jhey ʕ•ᴥ•ʔ

275,024 views • 2 years ago

sliding hover tip effect with CSS :has() and anchor positioning ✨ :root:has(li:nth-of-type(3):hover) { --i: 3; } .track { translate: 0 calc(var(--i) * -1lh); nav { anchor-name: --nav; } .tip { position-anchor: --nav; left: calc(anchor(right) + 1rem); }

sliding hover tip effect with CSS :has() and anchor positioning ✨ :root:has(li:nth-of-type(3):hover) { --i: 3; } .track { translate: 0 calc(var(--i) * -1lh); nav { anchor-name: --nav; } .tip { position-anchor: --nav; left: calc(anchor(right) + 1rem); }

jhey ʕ•ᴥ•ʔ

164,722 views • 2 years ago

5 min cursor trails with grid + CSS custom properties 💫 .grid div { opacity: var(--o); transition: opacity 0.8s, rotate 0.4s; &:hover { transition-duration: 0s; rotate: calc(var(--r, 0) * 90deg); opacity: 1; }} trick: dynamic :hover transition

5 min cursor trails with grid + CSS custom properties 💫 .grid div { opacity: var(--o); transition: opacity 0.8s, rotate 0.4s; &:hover { transition-duration: 0s; rotate: calc(var(--r, 0) * 90deg); opacity: 1; }} trick: dynamic :hover transition

jhey ʕ•ᴥ•ʔ

358,016 views • 1 year ago