Sublime

Gooey tooltips with the Popover API 🤙 – Zero JS – CSS linear() easing + anchor positioning – @​starting-style to transition to/from display: none – SVG filter on a dummy popover backdrop for goo ✨ <button popovertarget="tip"></button> <... See more

Interesting glitch hover effect for icons → https://t.co/FVsQMXUN60 https://t.co/k8Wou7igXF

CSS-only magnetic link effect 🤯 li:has(a:is(:hover, :focus-visible)) {anchor-name: --a; } ul::before { left: anchor(--a left); width: anchor-size(--a width); } using CSS anchor positioning, declare an anchor on hover for the... See more

3 lines of CSS to make your tooltips/menus stay in view 🤯 (Check it! 👇) [popover] { top: anchor(top); left: anchor(right); position-try-options: flip-block, flip-inline; } Responds to scroll, layout change, etc. Watch the... See more

Top-notch hover animation with dev context. → https://t.co/t79TaNoC72 https://t.co/LTJsmhNcTi

Directional aware CSS button :hover w/ lh, text-shadow, and linear() button:has(span:nth-of-type(2):hover) { --y: -1lh; } button span:first-of-type { translate: 0 var(--y); transition: translate .875s var(--spring); text-shadow: 0 1lh currentColor, 0 -1lh... See more

Exploring spatial tooltips with @henryheffernan https://t.co/kZktVGu1GG

Moving gradient based on the cursor position. → https://t.co/WmlVkxerpt https://t.co/O3KFLtHDsa

CSS anchor positioning API is so amazing. You can build interactive charts with collision-aware tooltips using only HTML and CSS. Thank you @Una @jh3yy and everyone involved! Can't wait for full support on Safari 🙌 Demo: https://t.co/bruqqxJDsY https://t.co/WedRzRPPE7