正在加载视频...

视频加载失败

返回首页

css cyber[popover] 2025 w/ sfx (jus' javascript for the audio and keyboard shortcuts)

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

135,805 subscribers

109,063 次观看 • 1 年前 •via X (Twitter)

科学技术教育艺术
LIVE

Anya Rossi• Live Now

Private livecam show

11 条评论

jhey ʕ•ᴥ•ʔ 的头像
jhey ʕ•ᴥ•ʔ1 年前

here's the @CodePen for this one 🚀 (toggle "muted" for the sound effects)

Mobile Scanner 的头像
Mobile Scanner1 年前

Scan any documents, convert images into text, PDF files, etc. 👍

CG 的头像
CG1 年前

cyberpunk 2077 vibes 🔥🔥🔥💯💯💯

caiodev 的头像
caiodev1 年前

dope @uphiago

Steve Lauda 的头像
Steve Lauda1 年前

Vibeeeee

Sean 的头像
Sean1 年前

ooooo this is cool

lear 的头像
lear1 年前

take it as a compliment :)

illia 🇺🇦 的头像
illia 🇺🇦1 年前

cool shit! can’t believe how far web platform has come

Don Carlos 的头像
Don Carlos1 年前

Code plz ? 🥹

jhey ʕ•ᴥ•ʔ 的头像
jhey ʕ•ᴥ•ʔ1 年前

i got you 🤙

sutra 的头像
sutra1 年前

It’s like every terminal in every space rpg in modern times

相关视频

Ready for the first cool demo of the year? A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀 Demo: via CodePen.IO ✔️ 100% CSS Magic ✔️ Minimal HTML ❌ 0% JavaScript A Chrome-only experimentation using modern CSS.
0:25

Ready for the first cool demo of the year? A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀 Demo: via CodePen.IO ✔️ 100% CSS Magic ✔️ Minimal HTML ❌ 0% JavaScript A Chrome-only experimentation using modern CSS.

CSS by T. Afif

36,412 次观看 • 6 个月前

responsive stacked tabs w/ CSS grid 👨‍🍳 + works with keyboard navigation + drag gestures + container queries for orientation
0:36

responsive stacked tabs w/ CSS grid 👨‍🍳 + works with keyboard navigation + drag gestures + container queries for orientation

jhey ʕ•ᴥ•ʔ

71,182 次观看 • 9 个月前

CSS + deviceorientation for responsive angle mode (def not supporting the keyboard 💀)
0:28

CSS + deviceorientation for responsive angle mode (def not supporting the keyboard 💀)

jhey ʕ•ᴥ•ʔ

111,055 次观看 • 1 年前

play 🤝 pause you don't always need to morph the svg jus' a little scale + translate on the paths w/ css 👇
0:49

play 🤝 pause you don't always need to morph the svg jus' a little scale + translate on the paths w/ css 👇

jhey ʕ•ᴥ•ʔ

16,239 次观看 • 24 天前

New keyboard canvas controls → Panning: with arrow keys and zoom → Placement: add frames and objects using shortcuts and a guided crosshair view → Selection: navigate, select, and toggle objects with just your keyboard → Screen reader support for keyboard canvas controls
0:31

New keyboard canvas controls → Panning: with arrow keys and zoom → Placement: add frames and objects using shortcuts and a guided crosshair view → Selection: navigate, select, and toggle objects with just your keyboard → Screen reader support for keyboard canvas controls

Figma

72,222 次观看 • 11 个月前

adding the little details™ progressively enhance the overdrag bounce with a sprinkle of JavaScript and some CSS linear() ✨
0:20

adding the little details™ progressively enhance the overdrag bounce with a sprinkle of JavaScript and some CSS linear() ✨

jhey ʕ•ᴥ•ʔ

90,167 次观看 • 2 年前

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 🚀
0:20

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 次观看 • 1 年前

stop duplicating your navigation for mobile 🤙 use the Popover API and some CSS tricks to make it responsive ✅ sidebar on desktop ✅ drawer on mobile ✅ progressively enhance the drag mechanics
0:29

stop duplicating your navigation for mobile 🤙 use the Popover API and some CSS tricks to make it responsive ✅ sidebar on desktop ✅ drawer on mobile ✅ progressively enhance the drag mechanics

jhey ʕ•ᴥ•ʔ

256,187 次观看 • 1 年前

I designed and built this simple landing page from scratch using HTML, CSS, and JavaScript. Unto the next chapter REACT 💪
0:41

I designed and built this simple landing page from scratch using HTML, CSS, and JavaScript. Unto the next chapter REACT 💪

Benita Mbulu

14,430 次观看 • 7 个月前

The cyber domain is a battlefield—and America’s warfighters are leading the way. The warriors of U.S. Cyber Command and NSA/CSS are relentlessly strengthening our national defense and protecting our Nation every single day.
0:49

The cyber domain is a battlefield—and America’s warfighters are leading the way. The warriors of U.S. Cyber Command and NSA/CSS are relentlessly strengthening our national defense and protecting our Nation every single day.

Secretary of War Pete Hegseth

136,194 次观看 • 15 天前

Options trading just got faster on Robinhood Legend. Enable auto-send for one click entries and exits, or use keyboard shortcuts to move even quicker.
0:37

Options trading just got faster on Robinhood Legend. Enable auto-send for one click entries and exits, or use keyboard shortcuts to move even quicker.

Robinhood

46,408 次观看 • 2 个月前

Mega #GSAP Demo Thread I've finished my Circles Study and now I will share them all with you here. CodePen.IO demos for each AND little GSAP tips along the way! 👇 #GSAP #creativeCoding #JavaScript #CSS
0:23

Mega #GSAP Demo Thread I've finished my Circles Study and now I will share them all with you here. CodePen.IO demos for each AND little GSAP tips along the way! 👇 #GSAP #creativeCoding #JavaScript #CSS

Carl 💥 Creative Coding Club

10,756 次观看 • 1 年前

⌨️ You can now fully customize, re-map, and disable keyboard shortcuts in ChatGPT This is major accessibility win for users with motion impairments - the page itself is built to very high accessibility standards with a lot of attn to detail there We hope it'll also be helpful to users that enjoy just sticking to keyboard-driven actions (e.g. I changed sending message to cmd+enter vs. just enter) Access it via Help > Keyboard Shortcuts or cmd+/
1:37

⌨️ You can now fully customize, re-map, and disable keyboard shortcuts in ChatGPT This is major accessibility win for users with motion impairments - the page itself is built to very high accessibility standards with a lot of attn to detail there We hope it'll also be helpful to users that enjoy just sticking to keyboard-driven actions (e.g. I changed sending message to cmd+enter vs. just enter) Access it via Help > Keyboard Shortcuts or cmd+/

Justin

10,948 次观看 • 3 个月前

Meowth gets BLASTED! Now with audio. Art by Yikki || 🔞(FULL SLOTS.) Shoutout to: stinkposting for helping w/ the sfx besides the braps & belly grumbles
0:41

Sensitive content

Meowth gets BLASTED! Now with audio. Art by Yikki || 🔞(FULL SLOTS.) Shoutout to: stinkposting for helping w/ the sfx besides the braps & belly grumbles

Lil' 🍊

49,409 次观看 • 1 年前

We have released Version 1.10.3! You can download the latest version for free😊 [Key Updates] * Distance Tracking Between User and Camera in Upper Body Tracking Mode * Save Screenshots Using Keyboard Shortcuts * VRMA File Support for Animation
2:09

We have released Version 1.10.3! You can download the latest version for free😊 [Key Updates] * Distance Tracking Between User and Camera in Upper Body Tracking Mode * Save Screenshots Using Keyboard Shortcuts * VRMA File Support for Animation

Webcam Motion Capture

115,060 次观看 • 1 年前

Developer Preview for Meta Ray-Ban Display is rolling out. 👓📷 Build web apps for display glasses with HTML, CSS, and JavaScript, or extend your mobile apps with the Meta Wearables Device Access Toolkit. Start building today 📷👉
0:28

Developer Preview for Meta Ray-Ban Display is rolling out. 👓📷 Build web apps for display glasses with HTML, CSS, and JavaScript, or extend your mobile apps with the Meta Wearables Device Access Toolkit. Start building today 📷👉

Oscar Falmer

79,524 次观看 • 2 个月前

12. Introduction to computer science. An introduction to computer science thinking and the art of programming. Topics: Solve problems through algorithms. Programming languages: C, Pbython, SQL, JavaScript, CSS, HTML and more. URL:
0:45

12. Introduction to computer science. An introduction to computer science thinking and the art of programming. Topics: Solve problems through algorithms. Programming languages: C, Pbython, SQL, JavaScript, CSS, HTML and more. URL:

HR Swati sharma

60,499 次观看 • 7 个月前

responsive CSS pinned sidebar transition 📌 .layout:has(:popover-open) { grid-template-columns: var(--sidebar-width) 1fr; } aside:popover-open { translate: 0 var(--ctrl); height: var(--extend); } actual zero JS for the layout transition here so many details to play with! 🧑‍🍳
0:36

responsive CSS pinned sidebar transition 📌 .layout:has(:popover-open) { grid-template-columns: var(--sidebar-width) 1fr; } aside:popover-open { translate: 0 var(--ctrl); height: var(--extend); } actual zero JS for the layout transition here so many details to play with! 🧑‍🍳

jhey ʕ•ᴥ•ʔ

386,721 次观看 • 9 个月前

3d hover effect made only using css. no javascript or framer motion used here. im utilizing css `preserve-3d` transform-style. the parent tilts 55deg (X-axis) and spins -45deg (Z-axis). and on hover, im translating cards' Z 20px to have that elevation. with proper easing.
0:34

3d hover effect made only using css. no javascript or framer motion used here. im utilizing css `preserve-3d` transform-style. the parent tilts 55deg (X-axis) and spins -45deg (Z-axis). and on hover, im translating cards' Z 20px to have that elevation. with proper easing.

Soren

21,757 次观看 • 8 个月前