Design Engineer https://nitter.cf/t.co/ZkQxbAwI7F https://nitter.cf/t.co/Fzq4yZT5u4
Joined June 2024
- Tweets810
- Following56
- Followers813
- Likes1K
css tip: scale buttons down while they're pressed.
a click has two halves, the press and the release. most buttons only answer the release. a small scale on :active answers the press, so it feels like the button gave under your finger.
button {
transition: scale 120ms ease-out;
}
button:active {
scale: 0.96;
}
css tip: make the exit faster than the enter.
when a menu opens, people are waiting for it. when it closes, they've already moved on. a slow exit just gets in the way.
a transition uses the timing of the state it's going to, so put the exit timing on the base rule.
.menu {
opacity: 0;
transition: opacity 200ms ease-out;
}
.menu.open {
opacity: 1;
transition-duration: 320ms;
}
Nexvyn retweeted
UI tip: Don’t close submenus the moment the cursor touches another row.
Nobody moves right then down. They cut the corner, brush the next row, and the submenu they wanted disappears.
Draw a triangle from the cursor to the submenu’s near edge. While the cursor stays inside it, keep the submenu open.
const heading = inTriangle(pointer, lastPoint, subTopLeft, subBottomLeft);
if (overAnotherRow && !heading) openSubmenu(row);
UI tip: Don’t close submenus the moment the cursor touches another row.
Nobody moves right then down. They cut the corner, brush the next row, and the submenu they wanted disappears.
Draw a triangle from the cursor to the submenu’s near edge. While the cursor stays inside it, keep the submenu open.
const heading = inTriangle(pointer, lastPoint, subTopLeft, subBottomLeft);
if (overAnotherRow && !heading) openSubmenu(row);
Nexvyn UI now has blocks.
32 real page sections for React, Next.js and Tailwind: banners, CTAs, footers, FAQs, logins, sidebars and social proof.
Copy. Paste. Ship.
All blocks and components are free and open source.
ui.nexvyn.dev/
If you find it useful, feel free to visit the repo.github.com/Nexvyn/Nexvyn-ui
css tip: stop trying to animate height to auto.
the browser can't animate to height: auto, so the panel just jumps open.
animate grid-template-rows from 0fr to 1fr instead. the row grows to the real height of the content, whatever it is.
.panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 300ms ease-out;
}
.panel.open {
grid-template-rows: 1fr;
}
.panel > div {
overflow: hidden;
}
css tip: tooltips that know when they’re about to get clipped.
new way (flips automatically):
.trigger {
anchor-name: --tip;
}
.tooltip {
position: fixed;
position-anchor: --tip;
position-area: right;
position-try-fallbacks: flip-inline, flip-block;
}
old way (gets cut off near edges):
position: absolute;
left: 100%;
translate: 0 -50%;
older browsers, do it in js:
render it outside (portal or popover)
measure the viewport space
flip to the side that fits
slide it back inside
re-measure on scroll and resize
either way:
point the arrow at the trigger
animate from the arrow
escape closes it, hover onto it, show on focus
watch out:
overflow: hidden parents clip it anywhere
anchor positioning needs chrome 128, firefox 147, safari 26
fixed triggers? just pick the open side