Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

keyboard-accessible resizable sidebar was achieved: - increased action area - cursor stays the same while dragging, no flickering - double-click to reset to default width - arrows for 10px resize - shift + arrows for 50px resize

pqoqubbw's profile picture

dmytro

8,148 subscribers

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

CSS Trick ⭐️ You can create a resizable panel UI with CSS alone by leaning into resize and display:grid 👀 .panels{ display: grid; grid-template-columns: auto 1fr; 👈 } .resizer{ max-width: 100cqi; overflow: hidden; resize: horizontal; 👈 } Putting a resizable element into the first panel provides a way to resize the layout as we're using "auto 1fr". You could also do this with other layout techniques but grid was the first that came to me 😅 But, the issue with resize is you can't style the teeny tiny little handle the browser provides... 🤦‍♂️ So, a trick for that is to scale the resizable element up and then clip the part we don't need 😯 .resizer { height: 48px; transform-origin: 100% 100%; scale: 4; clip-path: inset(calc(100% - 12px) 0 0 calc(100% - 12px)); } And that gives you a slightly better hit spot for the resize handle plus the ability to move it around 🙌 It's not perfect by any means. It does raise the question of how hard would it be to implement support for styling the resize handle in the browser? CodePen.IO link below! 👇
0:38

CSS Trick ⭐️ You can create a resizable panel UI with CSS alone by leaning into resize and display:grid 👀 .panels{ display: grid; grid-template-columns: auto 1fr; 👈 } .resizer{ max-width: 100cqi; overflow: hidden; resize: horizontal; 👈 } Putting a resizable element into the first panel provides a way to resize the layout as we're using "auto 1fr". You could also do this with other layout techniques but grid was the first that came to me 😅 But, the issue with resize is you can't style the teeny tiny little handle the browser provides... 🤦‍♂️ So, a trick for that is to scale the resizable element up and then clip the part we don't need 😯 .resizer { height: 48px; transform-origin: 100% 100%; scale: 4; clip-path: inset(calc(100% - 12px) 0 0 calc(100% - 12px)); } And that gives you a slightly better hit spot for the resize handle plus the ability to move it around 🙌 It's not perfect by any means. It does raise the question of how hard would it be to implement support for styling the resize handle in the browser? CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

331,287 Aufrufe • vor 2 Jahren

CSS Trick 🖼️ You could take the resize trick from last week and use it to create one of those sliding image components 👀 CSS only, JavaScript to enhance later 🤓 Put an image in each panel and make them position: absolute. They can use a container query unit for their size 🫶 img { position: absolute; width: 100cqi; // Make them the container width 🤙 } .panel:last-of-type img { right: 0; } The rest of the trick from last week was using display:grid with grid-template-columns. Then we have a resizable element inside the first column 😎 .panels{ display: grid; grid-template-columns: auto 1fr; 👈 } .resizer{ max-width: 100cqi; overflow: hidden; resize: horizontal; 👈 } Where does JavaScript come in? To progressively enhance the thing with keyboard controls ✨ Not 100% sure of the pattern for that though. Feels like it should be a button that you can toggle into resize mode and then use left/right to resize 🤔 Anyways, CodePen.IO link below! 👇
0:30

CSS Trick 🖼️ You could take the resize trick from last week and use it to create one of those sliding image components 👀 CSS only, JavaScript to enhance later 🤓 Put an image in each panel and make them position: absolute. They can use a container query unit for their size 🫶 img { position: absolute; width: 100cqi; // Make them the container width 🤙 } .panel:last-of-type img { right: 0; } The rest of the trick from last week was using display:grid with grid-template-columns. Then we have a resizable element inside the first column 😎 .panels{ display: grid; grid-template-columns: auto 1fr; 👈 } .resizer{ max-width: 100cqi; overflow: hidden; resize: horizontal; 👈 } Where does JavaScript come in? To progressively enhance the thing with keyboard controls ✨ Not 100% sure of the pattern for that though. Feels like it should be a button that you can toggle into resize mode and then use left/right to resize 🤔 Anyways, CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

111,404 Aufrufe • vor 2 Jahren

Today, we're introducing Editable Text Layers and Design Categories. Your copy is now its own layer. Rewrite it. Restyle it. Resize it. The image underneath stays exactly as it was. Available to all users for free, and accessible via the API.
0:42

Today, we're introducing Editable Text Layers and Design Categories. Your copy is now its own layer. Rewrite it. Restyle it. Resize it. The image underneath stays exactly as it was. Available to all users for free, and accessible via the API.

Ideogram

45,270 Aufrufe • vor 2 Monaten

Okay, tldraw is the best whiteboarding app 🏆 - Attention to detail off-the-charts. Even the dashes resize to always stay symmetrical - Keyboard shortcuts are snappy. shift+2 to focus a selection, shift+1 to see everything - Available as an SDK to embed anywhere
0:39

Okay, tldraw is the best whiteboarding app 🏆 - Attention to detail off-the-charts. Even the dashes resize to always stay symmetrical - Keyboard shortcuts are snappy. shift+2 to focus a selection, shift+1 to see everything - Available as an SDK to embed anywhere

Ben Holmes

32,072 Aufrufe • vor 10 Monaten

updated the ryOS window manager today 🪟 all built via tiny one‑shot plans in Cursor: – exposé-style window switcher – resizable, auto‑hide dock – snap to edges with smart auto‑resize turns out obsessing over tiny details is weirdly cathartic
0:23

updated the ryOS window manager today 🪟 all built via tiny one‑shot plans in Cursor: – exposé-style window switcher – resizable, auto‑hide dock – snap to edges with smart auto‑resize turns out obsessing over tiny details is weirdly cathartic

Ryo Lu

30,731 Aufrufe • vor 6 Monaten

How to resize a man's waistband for a sharp tailored look
1:01

How to resize a man's waistband for a sharp tailored look

Technology & Machines 👩‍💻⚙️

70,910 Aufrufe • vor 3 Monaten

. Arrows in Action? who even is that??? 🤷 guess we'll have to find out in orlando do some proper research on Arrows In Action:
0:41

Sensitive content

. Arrows in Action? who even is that??? 🤷 guess we'll have to find out in orlando do some proper research on Arrows In Action:

Vans Warped Tour

34,967 Aufrufe • vor 1 Jahr

I took this keyboard to the next level with Gemini while waiting for Codex to reset.
1:12

I took this keyboard to the next level with Gemini while waiting for Codex to reset.

Lex Tang

93,933 Aufrufe • vor 12 Tagen

What are the arrows for
2:49

What are the arrows for

All funNGames

316,754 Aufrufe • vor 4 Monaten

Secondary Structure cartoons are now part of #MolecularNodes ! v2.6.0: Every aspect of these are customisable. Width, thickness, colour, arrows / no arrows, cylinders. In love with the final result. Done entirely within #GeometryNodes and #Blender3d
0:41

Secondary Structure cartoons are now part of #MolecularNodes ! v2.6.0: Every aspect of these are customisable. Width, thickness, colour, arrows / no arrows, cylinders. In love with the final result. Done entirely within #GeometryNodes and #Blender3d

Brady Johnston

71,167 Aufrufe • vor 3 Jahren

No red arrows and captain blanks for the next 80 days
0:51

No red arrows and captain blanks for the next 80 days

FPL Marcin

24,037 Aufrufe • vor 1 Jahr

Explosive Arrows + 100% Chance to not consume arrows (Abyss Gear) #CrimsonDesert
0:21

Explosive Arrows + 100% Chance to not consume arrows (Abyss Gear) #CrimsonDesert

Mohammad

195,664 Aufrufe • vor 2 Monaten

Arrows up for the Lady Spikers #UAAPSeason88 INQUIRER Sports
0:25

Arrows up for the Lady Spikers #UAAPSeason88 INQUIRER Sports

Lance Agcaoili

36,724 Aufrufe • vor 1 Monat

Meet the new Table Node UI! Add, move, resize, merge, and duplicate tables right inside your editor. Fully accessible, keyboard-friendly, and dark-mode ready. Included in your Pro subscription: npx @tiptap/cli@latest add table-node Docs:
0:28

Meet the new Table Node UI! Add, move, resize, merge, and duplicate tables right inside your editor. Fully accessible, keyboard-friendly, and dark-mode ready. Included in your Pro subscription: npx @tiptap/cli@latest add table-node Docs:

Tiptap

28,838 Aufrufe • vor 6 Monaten

Introducing Elbow arrows! 🚀 Many thanks to Mark Tolmacs for implementation, and Preet Shihn for initial prototyping! 💜
0:30

Introducing Elbow arrows! 🚀 Many thanks to Mark Tolmacs for implementation, and Preet Shihn for initial prototyping! 💜

Excalidraw

42,569 Aufrufe • vor 1 Jahr

The way she was throwing arrows are INSANE 😳
0:47

The way she was throwing arrows are INSANE 😳

People Of The Internet

1,098,327 Aufrufe • vor 3 Monaten

Silver Arrows ⬆️ New to the grid for 2025, the Mercedes-AMG Motorsport LMGT3 never goes unheard with their soundtrack! Complete with legendary Silver Arrows Le Mans 2025 liveries, the Iron Lynx cars are coming FREE to all players on 22nd July! #lemansultimate #wec #LeMans24
0:37

Silver Arrows ⬆️ New to the grid for 2025, the Mercedes-AMG Motorsport LMGT3 never goes unheard with their soundtrack! Complete with legendary Silver Arrows Le Mans 2025 liveries, the Iron Lynx cars are coming FREE to all players on 22nd July! #lemansultimate #wec #LeMans24

Le Mans Ultimate

32,830 Aufrufe • vor 11 Monaten

🚨 BREAKING - More “Arrows” UFOs captured over Trawniki, Poland The video was uploaded to Reddit today #Ufotwitter
0:32

🚨 BREAKING - More “Arrows” UFOs captured over Trawniki, Poland The video was uploaded to Reddit today #Ufotwitter

T R U T H P O L E

104,581 Aufrufe • vor 8 Monaten

While most generators are just "random face machines," MagicLight finally achieved 100% identity lock. Same protagonist. Multiple environments. Zero flickering. The "Consistency Curse" is officially over—see for yourself. 👇
1:00

While most generators are just "random face machines," MagicLight finally achieved 100% identity lock. Same protagonist. Multiple environments. Zero flickering. The "Consistency Curse" is officially over—see for yourself. 👇

COLAW

126,427 Aufrufe • vor 4 Monaten