Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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 Aufrufe • vor 7 Monaten •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

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

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

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

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

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

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

146,987 Aufrufe • vor 3 Jahren

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

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

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

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

489,839 Aufrufe • vor 2 Jahren

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

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

657,776 Aufrufe • vor 1 Jahr

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

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

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

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,381 Aufrufe • vor 11 Monaten

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

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

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

🤸‍♀️ Tip: how to use the #StationRotation model with large class sizes! The trick? A mirror rotation. 🪞 Want to be the first to get tips like this plus access to exclusive templates? Sign up for my email list: #EdChat #EduTwitter
1:25

🤸‍♀️ Tip: how to use the #StationRotation model with large class sizes! The trick? A mirror rotation. 🪞 Want to be the first to get tips like this plus access to exclusive templates? Sign up for my email list: #EdChat #EduTwitter

Dr. Catlin Tucker

16,575 Aufrufe • vor 2 Jahren