正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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">

jhey ʕ•ᴥ•ʔ

146,209 subscribers

307,232 次观看 • 2 年前 •via X (Twitter)

教育科学技术

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

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">..</>

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,658 次观看 • 2 年前

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.

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,454 次观看 • 3 年前

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

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

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

17,489 次观看 • 8 个月前

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!

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

149,788 次观看 • 2 个月前

💡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 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,769 次观看 • 8 个月前

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

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

klau

29,107 次观看 • 6 个月前

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

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

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

David Mráz

63,563 次观看 • 2 年前

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 →

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

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 →

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 次观看 • 4 个月前

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 🤙

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

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

Sensitive content

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

Cuniculture

815,583 次观看 • 6 个月前

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! 💪

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,131 次观看 • 3 年前

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

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

Ahmad Shadeed

38,739 次观看 • 9 个月前

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

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,621 次观看 • 6 个月前

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

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

Aria Vivo

27,358 次观看 • 1 年前

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

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

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

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

David Mráz

65,912 次观看 • 1 年前

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

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

ever wanted to overlay multiple materials in threejs? drei can help with this now: <mesh> <boxGeometry /> <MultiMaterial> <meshBasicMaterial /> <customMaterial /> ... thx to Verekia | ManaBlade.com for the idea & Don McCurdy for fixing glitches

ever wanted to overlay multiple materials in threejs? drei can help with this now: <mesh> <boxGeometry /> <MultiMaterial> <meshBasicMaterial /> <customMaterial /> ... thx to Verekia | ManaBlade.com for the idea & Don McCurdy for fixing glitches

☄︎

18,151 次观看 • 1 年前