Loading video...

Video Failed to Load

Go Home

CSS is mind-blowing 🤯 Browser does what it can to keep the menus in view. Even when you scroll. Zero JavaScript (Aside from the Draggable part) This is the important HTML 👇 (anchor) <button id="trigger" popovertarget="menu"> <div popover="auto" id="menu" anchor="trigger">

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,377 subscribers

307,283 views • 2 years ago •via X (Twitter)

EducationScience & Technology
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

No-JS hamburger menu w/the popover API: Browser handles: - clicks on hamburger & close btns - esc key to exit - tab nav - spacebar + enter key toggle (open & close) - light dismiss (click away) close How: <btn popovertarget="menu">..</> <div popover role="menu" id="menu">..</>
0:15

No-JS hamburger menu w/the popover API: Browser handles: - clicks on hamburger & close btns - esc key to exit - tab nav - spacebar + enter key toggle (open & close) - light dismiss (click away) close How: <btn popovertarget="menu">..</> <div popover role="menu" id="menu">..</>

Una 🇺🇦

379,685 views • 2 years ago

LOOK. This is just a regular ol' website. No JavaScript whatsoever. Navigation pages with clicks <a> links to other HTML pages. The most basic website in the world. Yet, with a few lines of code to activate View Transitions, KAPOW.
0:14

LOOK. This is just a regular ol' website. No JavaScript whatsoever. Navigation pages with clicks <a> links to other HTML pages. The most basic website in the world. Yet, with a few lines of code to activate View Transitions, KAPOW.

Chris Coyier

830,480 views • 3 years ago

Teto is overconfident and FKIGNBGH DIES!!! >> TRIGGER WARNING ⚠️⚠️⚠️<< EXTEMERLEMLY GRAPHIG #VTuber #VRChat
0:10

Teto is overconfident and FKIGNBGH DIES!!! >> TRIGGER WARNING ⚠️⚠️⚠️<< EXTEMERLEMLY GRAPHIG #VTuber #VRChat

𝗤𝘆𝘂 • 𝕍𝕥𝕦𝕓𝕖𝕣 • 💾❁

17,489 views • 9 months ago

a well-known iOS Safari quirk is that inputs with a font-size <16px trigger an auto-zoom on focus using 16px is probably the best solution, but it can feel a bit heavy in tight UIs a clever workaround is to keep the font-size at 16px and scale the input down with CSS!
0:17

a well-known iOS Safari quirk is that inputs with a font-size <16px trigger an auto-zoom on focus using 16px is probably the best solution, but it can feel a bit heavy in tight UIs a clever workaround is to keep the font-size at 16px and scale the input down with CSS!

daniel petho

150,029 views • 3 months ago

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!
0:16

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!

CSS by T. Afif

57,924 views • 9 months ago

o tinowns (6x campeão) tomou um "Ou eu ou ele" do TRIGGER e o treinador optou pelo trigger. >>HOJE<< o trigger foi kickado.
0:12

o tinowns (6x campeão) tomou um "Ou eu ou ele" do TRIGGER e o treinador optou pelo trigger. >>HOJE<< o trigger foi kickado.

TES Rodrigo

70,792 views • 2 months ago

fyi, this is what you all have been calling “evil” in <the manipulated> !
0:14

fyi, this is what you all have been calling “evil” in <the manipulated> !

klau

29,107 views • 7 months ago

💡 CSS Tip! Do you know that One-Time password field? You can create it using only one input and a few lines of CSS. The HTML: <input type="text" maxlength="6"> Code & Demo: You can control the number of characters by adjusting the maxlength attribute.
0:14

💡 CSS Tip! Do you know that One-Time password field? You can create it using only one input and a few lines of CSS. The HTML: <input type="text" maxlength="6"> Code & Demo: You can control the number of characters by adjusting the maxlength attribute.

CSS by T. Afif

25,194 views • 1 year ago

Create this sign up screen with HTML, CSS and JavaScript 👨‍💻🚀 Code in the comments 👇
0:10

Create this sign up screen with HTML, CSS and JavaScript 👨‍💻🚀 Code in the comments 👇

David Mráz

63,567 views • 3 years ago

HTML parece fácil pero... ¿Puedes usar un <ul> dentro de un <p>? ¿Y un <span> dentro de un <button>? ¡Demasiadas combinaciones a tener en cuenta! Este recurso te explica cómo usar bien HTML →
0:19

HTML parece fácil pero... ¿Puedes usar un <ul> dentro de un <p>? ¿Y un <span> dentro de un <button>? ¡Demasiadas combinaciones a tener en cuenta! Este recurso te explica cómo usar bien HTML →

Miguel Ángel Durán

36,622 views • 1 year ago

HTML parece fácil pero... ¿Puedes usar un <ul> dentro de un <p>? ¿Y un <span> dentro de un <button>? ¡Demasiadas combinaciones a tener en cuenta! Este recurso te explica cómo usar bien HTML →
0:19

HTML parece fácil pero... ¿Puedes usar un <ul> dentro de un <p>? ¿Y un <span> dentro de un <button>? ¡Demasiadas combinaciones a tener en cuenta! Este recurso te explica cómo usar bien HTML →

Miguel Ángel Durán

30,849 views • 5 months ago

Updated menu animations comparison. I actually feel conflicted in a way you wouldn't guess >.<
0:12

Sensitive content

Updated menu animations comparison. I actually feel conflicted in a way you wouldn't guess >.<

Cuniculture

815,583 views • 7 months ago

Forgot to mention this CSS tip when sharing the :has() calendar 🤦‍♂️ It's a <table> & a snippet like this 👇 tr:has(:checked) ~ tr:has(:hover) .cell:has(~ .cell:hover) Says target the cell in a sibling row that's hovered and has a sibling that is hovered 🤯 You :has() power! 💪
0:15

Forgot to mention this CSS tip when sharing the :has() calendar 🤦‍♂️ It's a <table> & a snippet like this 👇 tr:has(:checked) ~ tr:has(:hover) .cell:has(~ .cell:hover) Says target the cell in a sibling row that's hovered and has a sibling that is hovered 🤯 You :has() power! 💪

jhey ʕ•ᴥ•ʔ

298,144 views • 3 years ago

kinda wild how far you can get with CSS alone a scroll animation tied to the content scroll powers the percentage update + icon animation interpolate-size provides a way to transition the popover between button size and content size using starting-style 🤙
0:17

kinda wild how far you can get with CSS alone a scroll animation tied to the content scroll powers the percentage update + icon animation interpolate-size provides a way to transition the popover between button size and content size using starting-style 🤙

jhey ʕ•ᴥ•ʔ

120,785 views • 1 year ago

Getting a few questions about the menu options. This is specifically for building inverted menus in light mode. Works for dropdown menu, select, combobox, context menu, menubar...etc
0:10

Getting a few questions about the menu options. This is specifically for building inverted menus in light mode. Works for dropdown menu, select, combobox, context menu, menubar...etc

shadcn

75,655 views • 7 months ago

In case you missed it, I wrote about the basics CSS Anchor Positioning. 🔗
0:16

In case you missed it, I wrote about the basics CSS Anchor Positioning. 🔗

Ahmad Shadeed

38,739 views • 10 months ago

Create this sidebar using HTML, CSS and JavaScript 🚀 Code in the comments 👨‍💻
0:10

Create this sidebar using HTML, CSS and JavaScript 🚀 Code in the comments 👨‍💻

David Mráz

65,949 views • 1 year ago

"Mind taking me home tonight...?" this outfit is making me go awooga in the head... >.<!
0:16

"Mind taking me home tonight...?" this outfit is making me go awooga in the head... >.<!

Aria Vivo

27,358 views • 2 years ago

It’s 3AM and I just recreated Apple Liquid Metal right in the browser. No JavaScript. No WebGL. Just raw HTML + CSS. Let me know if you want the code
0:12

It’s 3AM and I just recreated Apple Liquid Metal right in the browser. No JavaScript. No WebGL. Just raw HTML + CSS. Let me know if you want the code

Mike Bespalov

1,233,571 views • 1 year ago

HTML y CSS para crear un menú lateral animado usando la API de popover y la regla CSS starting-style. Sin JavaScript.
0:10

HTML y CSS para crear un menú lateral animado usando la API de popover y la regla CSS starting-style. Sin JavaScript.

Miguel Ángel Durán

20,274 views • 1 year ago