Loading video...

Video Failed to Load

Go Home

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

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

135,805 subscribers

109,063 views • 1 year ago •via X (Twitter)

Science & TechnologyEducationArts
LIVE

Anya Rossi• Live Now

Private livecam show

11 Comments

jhey ʕ•ᴥ•ʔ's profile picture
jhey ʕ•ᴥ•ʔ1 year ago

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

Mobile Scanner's profile picture
Mobile Scanner1 year ago

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

CG's profile picture
CG1 year ago

cyberpunk 2077 vibes 🔥🔥🔥💯💯💯

caiodev's profile picture
caiodev1 year ago

dope @uphiago

Steve Lauda's profile picture
Steve Lauda1 year ago

Vibeeeee

Sean's profile picture
Sean1 year ago

ooooo this is cool

lear's profile picture
lear1 year ago

take it as a compliment :)

illia 🇺🇦's profile picture
illia 🇺🇦1 year ago

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

Don Carlos's profile picture
Don Carlos1 year ago

Code plz ? 🥹

jhey ʕ•ᴥ•ʔ's profile picture
jhey ʕ•ᴥ•ʔ1 year ago

i got you 🤙

sutra's profile picture
sutra1 year ago

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

Related Videos

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 views • 6 months ago

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 views • 9 months ago

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 views • 1 year ago

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 views • 23 days ago

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 views • 11 months ago

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 views • 2 years ago

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 views • 1 year ago

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 views • 1 year ago

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 views • 7 months ago

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

134,964 views • 14 days ago

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 views • 2 months ago

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 views • 1 year ago

⌨️ 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 views • 3 months ago

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 views • 1 year ago

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 views • 1 year ago

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,421 views • 2 months ago

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 views • 7 months ago

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 views • 9 months ago

Protip: if you want to understand why more elements paint than expected (to compare rendering libraries, for example), you can use the Layer tool inspect it. hint: it's css, not javascript
0:27

Protip: if you want to understand why more elements paint than expected (to compare rendering libraries, for example), you can use the Layer tool inspect it. hint: it's css, not javascript

Ricky

29,251 views • 3 months ago