Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

⚡️ Custom Made Device Copper Coil 💥 💎 A lot of power being produced by this device...
1:57

⚡️ Custom Made Device Copper Coil 💥 💎 A lot of power being produced by this device...

𝐏𝐇𝐎𝐄𝐍𝐈𝐗🐦‍🔥𝐃𝐑𝐀𝐆𝐎𝐍

12,207 görüntüleme • 16 gün önce