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

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

На главную

hook this 3D CSS card up to device rotation? sure! 👨‍🍳 tip: use the DevTools "Sensors" emulator with "Custom Orientation" to debug/refine before taking it to a real device 👇

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

145,811 subscribers

81,748 просмотров • 8 месяцев назад •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 0

Нет доступных комментариев

Здесь появятся комментарии из оригинального поста

Похожие видео

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

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇
0:37

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

149,829 просмотров • 3 лет назад

How to add Chrome DevTools MCP to Claude Code (Bookmark this post to follow the setup later) This lets Claude debug your web apps in a real browser... performance traces, network inspection, console errors. Requirements: - Node.js 22+ - Chrome browser In the video below I show you: - How to install the MCP server - How to verify the DevTools tools are available - How to use it with a real performance trace
1:01

How to add Chrome DevTools MCP to Claude Code (Bookmark this post to follow the setup later) This lets Claude debug your web apps in a real browser... performance traces, network inspection, console errors. Requirements: - Node.js 22+ - Chrome browser In the video below I show you: - How to install the MCP server - How to verify the DevTools tools are available - How to use it with a real performance trace

Daniel San

52,294 просмотров • 9 месяцев назад

💡React tip: Use a custom hook to handle array states in your components
0:24

💡React tip: Use a custom hook to handle array states in your components

George Moller

119,703 просмотров • 2 лет назад

Playing GTA V on Nothing Phone (3) 🔥 Running locally on the device with a PC emulator app. Full video + how to:
0:48

Playing GTA V on Nothing Phone (3) 🔥 Running locally on the device with a PC emulator app. Full video + how to:

Ben Geskin

32,231 просмотров • 10 месяцев назад

Future CSS Tip! 🔮 You can power micro-interactions with scroll driven animations 😎 Define a range with custom props and hook up to body scroll 📜 .avatar{ animation:shrink; animation-timeline:scroll(root); animation-range:calc(var(--head)*0.9) ...; } CodePen.IO link below! 👇
0:23

Future CSS Tip! 🔮 You can power micro-interactions with scroll driven animations 😎 Define a range with custom props and hook up to body scroll 📜 .avatar{ animation:shrink; animation-timeline:scroll(root); animation-range:calc(var(--head)*0.9) ...; } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

147,001 просмотров • 3 лет назад

Scump reacts to device carriers in overload being forced to use a pistol in new update: “That’s a very big change.. the pistol is good this year but now you’re basically 3v4 with the device.. give Dashy the rock.” 🗣️
0:59

Scump reacts to device carriers in overload being forced to use a pistol in new update: “That’s a very big change.. the pistol is good this year but now you’re basically 3v4 with the device.. give Dashy the rock.” 🗣️

CoD Clipped

144,681 просмотров • 7 месяцев назад

In 1944 Edwin Land had a vision of “a pocket device you use like a telephone to record images for you to remember that would be with you always”. It would be an electronic device—with no film.
2:20

In 1944 Edwin Land had a vision of “a pocket device you use like a telephone to record images for you to remember that would be with you always”. It would be an electronic device—with no film.

Brian Roemmele

24,292 просмотров • 1 год назад

This Little Device Generates All The Frequencies In The World. ⚡🎶 Simple To Use. Powerful To Experience. It’s Changing The Way People Listen To Healing Frequencies. 🧠✨ Explore It 👇
0:30

This Little Device Generates All The Frequencies In The World. ⚡🎶 Simple To Use. Powerful To Experience. It’s Changing The Way People Listen To Healing Frequencies. 🧠✨ Explore It 👇

vegastar

17,518 просмотров • 4 месяцев назад

CSS Tip! ✨ You can use background-attachment to fix backgrounds to the viewport 🤙 card { background:radial-gradient(circle at var(--x) var(--y), ...); background-attachment:fixed; } JS to get the cursor position but use the same bg for a spotlight 🔦 CodePen.IO link below 👇
0:20

CSS Tip! ✨ You can use background-attachment to fix backgrounds to the viewport 🤙 card { background:radial-gradient(circle at var(--x) var(--y), ...); background-attachment:fixed; } JS to get the cursor position but use the same bg for a spotlight 🔦 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

490,167 просмотров • 3 лет назад

Apparently a Tesla Coil power source inducted field, made equivalent to the Earth’s gravity using Ion proulsion with a rotation flying wheel to gyroscopically keep it stable. This is the famed Graviflyer anti-gravity device by inventor Alexey Chekurkov. YouTube:
2:01

Apparently a Tesla Coil power source inducted field, made equivalent to the Earth’s gravity using Ion proulsion with a rotation flying wheel to gyroscopically keep it stable. This is the famed Graviflyer anti-gravity device by inventor Alexey Chekurkov. YouTube:

Brian Roemmele

659,822 просмотров • 1 год назад

a breakdown of how to cook letters with CSS put a little spin on it 👨‍🍳
0:31

a breakdown of how to cook letters with CSS put a little spin on it 👨‍🍳

jhey ʕ•ᴥ•ʔ

62,676 просмотров • 1 год назад

built some 3D css books in the past with scroll interaction and demo links might make a css cookbook 👨‍🍳
1:14

built some 3D css books in the past with scroll interaction and demo links might make a css cookbook 👨‍🍳

jhey ʕ•ᴥ•ʔ

59,139 просмотров • 7 месяцев назад

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 👇
0:25

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

The TANSTACK form devtools are here!!! 🔥🎊 New addition to the TanStack devtools family is finally out! 🚀 Debug your forms like never before! 🤖 Check out the docs how to add them to your project here:
0:22

The TANSTACK form devtools are here!!! 🔥🎊 New addition to the TanStack devtools family is finally out! 🚀 Debug your forms like never before! 🤖 Check out the docs how to add them to your project here:

Alem Tuzlak 🇧🇦

44,878 просмотров • 9 месяцев назад

The suit that gives workers superpowers The Biolift exoskeleton, a device designed to reduce back strain during heavy lifting, featuring adjustable straps and motion capture sensors for real-time support,
0:50

The suit that gives workers superpowers The Biolift exoskeleton, a device designed to reduce back strain during heavy lifting, featuring adjustable straps and motion capture sensors for real-time support,

Science girl

175,449 просмотров • 10 месяцев назад

css animation tip don't sleep on the devtools animation inspector — it's great for debugging and scrubbing your timelines 👇
0:32

css animation tip don't sleep on the devtools animation inspector — it's great for debugging and scrubbing your timelines 👇

jhey ʕ•ᴥ•ʔ

75,407 просмотров • 1 год назад

Stop guessing & start debugging responsive styles automatically with Chrome DevTools MCP→ Learn how a coding agent can find a visual bug on a specific device size, analyze the source code, update the CSS, & verify the fix with a live browser screenshot.
0:22

Stop guessing & start debugging responsive styles automatically with Chrome DevTools MCP→ Learn how a coding agent can find a visual bug on a specific device size, analyze the source code, update the CSS, & verify the fix with a live browser screenshot.

Chrome for Developers

19,286 просмотров • 9 месяцев назад

Have you ever tried use this device on gril to get escape...
0:43

Have you ever tried use this device on gril to get escape...

Bronze Age Pervert

63,426 просмотров • 3 лет назад

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! 👇
0:33

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

261,705 просмотров • 3 лет назад