Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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 Aufrufe • vor 2 Jahren •via X (Twitter)

BildungWissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche 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,669 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 8 Monaten

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 Aufrufe • vor 2 Monaten

💡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 Aufrufe • vor 9 Monaten

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 Aufrufe • vor 1 Monat

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 Aufrufe • vor 7 Monaten

💡 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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 4 Monaten

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 Aufrufe • vor 7 Monaten

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 3 Jahren

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,648 Aufrufe • vor 6 Monaten

"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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 10 Monaten

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,113 Aufrufe • vor 1 Jahr

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
0:11

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 Aufrufe • vor 1 Jahr

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,332 Aufrufe • vor 1 Jahr