Загрузка видео...

Не удалось загрузить видео

На главную

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 просмотров • 2 лет назад •via X (Twitter)

ОбразованиеНаука и технологии
LIVE

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">..</>
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,682 просмотров • 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.
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 просмотров • 3 лет назад

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 просмотров • 9 месяцев назад

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 просмотров • 3 месяцев назад

💡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 просмотров • 9 месяцев назад

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 просмотров • 2 месяцев назад

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 просмотров • 7 месяцев назад

💡 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 просмотров • 1 год назад

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 просмотров • 3 лет назад

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 просмотров • 4 месяцев назад

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 просмотров • 1 год назад

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 просмотров • 7 месяцев назад

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 просмотров • 1 год назад

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 просмотров • 3 лет назад

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 просмотров • 6 месяцев назад

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 просмотров • 1 год назад

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 просмотров • 10 месяцев назад

"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 просмотров • 2 лет назад

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,443 просмотров • 1 год назад

{\__/} ( ´︶`) / > 🐠 This is my ihan {\__/} ( ˘ ³˘ ) 🐠 < \ Nobody can take it. {\__/} (._. ) < \ Nobody can- {\___/} ( ｀Д´) / > > What? WHERE'S MY IHAN? {\____/} (ꐦ ಠ皿ಠ ) / ノ |ノ HAN TAESAN !!
0:16

{\__/} ( ´︶`) / > 🐠 This is my ihan {\__/} ( ˘ ³˘ ) 🐠 < \ Nobody can take it. {\__/} (._. ) < \ Nobody can- {\___/} ( ｀Д´) / > > What? WHERE'S MY IHAN? {\____/} (ꐦ ಠ皿ಠ ) / ノ |ノ HAN TAESAN !!

ble:p

19,238 просмотров • 1 год назад