Sublime
An inspiration engine for ideas
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
jhey Κβ’α΄₯β’Κx.comInteresting glitch hover effect for icons
β https://t.co/FVsQMXUN60 https://t.co/k8Wou7igXF
Jim Raptisx.comCSS-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
jhey Κβ’α΄₯β’Κx.com3 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
jhey Κβ’α΄₯β’Κx.comTop-notch hover animation with dev context.
β https://t.co/t79TaNoC72 https://t.co/LTJsmhNcTi
Jim Raptisx.comDirectional 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
jhey Κβ’α΄₯β’Κx.comMoving gradient based on the cursor position.
β https://t.co/WmlVkxerpt https://t.co/O3KFLtHDsa
Jim Raptisx.comCSS 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
Nimesh Nayaju Shresthax.com