Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 görüntüleme • 2 yıl önce •via X (Twitter)

EğitimBilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

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,679 görüntüleme • 2 yıl önce

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 görüntüleme • 3 yıl önce

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 görüntüleme • 9 ay önce

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 görüntüleme • 3 ay önce

💡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 görüntüleme • 9 ay önce

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 görüntüleme • 2 ay önce

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 görüntüleme • 7 ay önce

💡 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 görüntüleme • 1 yıl önce

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 görüntüleme • 3 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 4 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 7 ay önce

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 görüntüleme • 3 yıl önce

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 görüntüleme • 6 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 10 ay önce

"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 görüntüleme • 2 yıl önce

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,396 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce