Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

iOS-style morphing context menu w/ css transitions 👨‍🍳 [popover] api + anchor positioning + transition-behavior: allow-discrete

jhey ʕ•ᴥ•ʔ

147,278 subscribers

31,121 Aufrufe • vor 9 Monaten •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

15 Kommentare

Profilbild von jhey ʕ•ᴥ•ʔ

jhey ʕ•ᴥ•ʔvor 8 Monaten

seen other versions of this floating around but they missed the mark for me in terms of UX 👎 non-semantic markup, ignoring user prefs, no smart placement you don't need libs for any of that stuff, you can jus' build it yourself and wrap it up in a web component ✅

Profilbild von joshpuckett

joshpuckettvor 9 Monaten

the directional curve on this is very nice 👌

Profilbild von adeeb

adeebvor 8 Monaten

Now this ur really cool

Profilbild von jhey ʕ•ᴥ•ʔ

jhey ʕ•ᴥ•ʔvor 8 Monaten

@a6xx9rq thanks 🙏 had to scratch the itch

Profilbild von DesignBea🎀

DesignBea🎀vor 8 Monaten

You cooked 🔥🐐

Profilbild von Moe is tired

Moe is tiredvor 8 Monaten

Hi, do you have a website or codepen where you share the source code for your components?

Profilbild von Zantos

Zantosvor 9 Monaten

Beautiful

Profilbild von jhey ʕ•ᴥ•ʔ

jhey ʕ•ᴥ•ʔvor 8 Monaten

thanks Kyle 🤙

Profilbild von Gurbinder

Gurbindervor 8 Monaten

which chrome tool is that? to preview animation in slow mode?

Profilbild von cauã adomaitis

cauã adomaitisvor 6 Monaten

animating width and height or just scale? I always struggle with that and end up with some jank

Profilbild von zenith

zenithvor 8 Monaten

Another day to learn from you!

Profilbild von Anže Matelič

Anže Mateličvor 8 Monaten

Nice implementation . But have to say I am not the biggest fan of this version 😅

Profilbild von jhey ʕ•ᴥ•ʔ

jhey ʕ•ᴥ•ʔvor 8 Monaten

you mean the iOS style? i pretty much copied it from a screen recording and reduced the alpha + border-radius

Profilbild von Anže Matelič

Anže Mateličvor 8 Monaten

Yeah I mean the ios style. I don’t know but just to much bouncing for my taste 😅. But yeah respect for making this with css

Profilbild von jhey ʕ•ᴥ•ʔ

jhey ʕ•ᴥ•ʔvor 8 Monaten

oh yeah, i hear that 😅 i jus' been screen capturing things from my phone and messin' with them. i tried to pull it back a little, this one's from the Photos app and that has some significant bounce!

Ähnliche Videos

Neat piece is the responsive morph using CSS min() ✨ [popover] { transition-property: display, width, height; transition-behavior: allow-discrete; width: anchor-size(width); @starting-style { width: min(640px, 100vw - 2rem); }}

Neat piece is the responsive morph using CSS min() ✨ [popover] { transition-property: display, width, height; transition-behavior: allow-discrete; width: anchor-size(width); @starting-style { width: min(640px, 100vw - 2rem); }}

jhey ʕ•ᴥ•ʔ

64,817 Aufrufe • vor 2 Jahren

Putting CSS Anchor Positioning to the test by throwing dropdown menus around 💪 [popover].dropdown { top: anchor(bottom); right: anchor(right); position-try-options: flip-block, flip-inline; } That's all 👆 Keeps the menu tethered to the button

Putting CSS Anchor Positioning to the test by throwing dropdown menus around 💪 [popover].dropdown { top: anchor(bottom); right: anchor(right); position-try-options: flip-block, flip-inline; } That's all 👆 Keeps the menu tethered to the button

jhey ʕ•ᴥ•ʔ

112,155 Aufrufe • vor 2 Jahren

CSS only animated exclusive accordion update 🚀 details { interpolate-size: allow-keywords; } ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: auto; }

CSS only animated exclusive accordion update 🚀 details { interpolate-size: allow-keywords; } ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: auto; }

jhey ʕ•ᴥ•ʔ

51,170 Aufrufe • vor 2 Jahren

CSS macOS style dock nav with sub-menu 🤙 :has() for magnification ✅ [popover] for the sub-menu ✅ anchor() to tether the menu ✅ offset-path to put items on the curve ✅ linear() for the springy transition ✅ Combining cool APIs to create common UI patterns without JS ⭐️

CSS macOS style dock nav with sub-menu 🤙 :has() for magnification ✅ [popover] for the sub-menu ✅ anchor() to tether the menu ✅ offset-path to put items on the curve ✅ linear() for the springy transition ✅ Combining cool APIs to create common UI patterns without JS ⭐️

jhey ʕ•ᴥ•ʔ

91,134 Aufrufe • vor 2 Jahren

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 nested menu 👇 Anchor Positioning is coming 🚀

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 nested menu 👇 Anchor Positioning is coming 🚀

jhey ʕ•ᴥ•ʔ

484,589 Aufrufe • vor 2 Jahren

Animated exclusive accordions with CSS 😎 ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: calc-size(auto); } Exclusive On the way! 🫶

Animated exclusive accordions with CSS 😎 ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: calc-size(auto); } Exclusive On the way! 🫶

jhey ʕ•ᴥ•ʔ

216,740 Aufrufe • vor 2 Jahren

fun little blog filters with css anchor positioning

fun little blog filters with css anchor positioning

Petr Knoll

73,087 Aufrufe • vor 7 Monaten

Future CSS Tip! 🔮 You could combine anchor positioning + :has to create this kinda iPad style follow effect ✨ [href=blog]{anchor-name:--bl;} :root:has([href=blog]:hover){--a: --bl;} .cursor{left:anchor(var(--a) left);} You can transition anchors! 😎 CodePen.IO link below! 👇

Future CSS Tip! 🔮 You could combine anchor positioning + :has to create this kinda iPad style follow effect ✨ [href=blog]{anchor-name:--bl;} :root:has([href=blog]:hover){--a: --bl;} .cursor{left:anchor(var(--a) left);} You can transition anchors! 😎 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

201,244 Aufrufe • vor 3 Jahren

Morphing Menu Effect | Liquid Glass | iOS 26 | Xcode 26

Morphing Menu Effect | Liquid Glass | iOS 26 | Xcode 26

Kavsoft

38,529 Aufrufe • vor 1 Jahr

iOS alarm barrel input w/ 3D CSS ⏰ drag gestures + scroll animation mapped to an <input type=time> 👨‍🍳

iOS alarm barrel input w/ 3D CSS ⏰ drag gestures + scroll animation mapped to an <input type=time> 👨‍🍳

jhey ʕ•ᴥ•ʔ

110,070 Aufrufe • vor 1 Jahr

Future CSS Tip! 🔮 Anchor Positioning lets you anchor elements to others with CSS alone 👍 It can also work out positioning if an element gets clipped by a container, window, etc. Think "Common floating UI uses with no JS" 🤯 .el { bottom: anchor(--link top); } Just CSS 👇

Future CSS Tip! 🔮 Anchor Positioning lets you anchor elements to others with CSS alone 👍 It can also work out positioning if an element gets clipped by a container, window, etc. Think "Common floating UI uses with no JS" 🤯 .el { bottom: anchor(--link top); } Just CSS 👇

jhey ʕ•ᴥ•ʔ

160,652 Aufrufe • vor 3 Jahren

note to self: revisit pixelated transition effects this is a "similar" experiment but relies only on css mask and a randomly generated sprite 🤙 idea was to extend it to scroll reveals, popover transitions, details/summary, etc.

note to self: revisit pixelated transition effects this is a "similar" experiment but relies only on css mask and a randomly generated sprite 🤙 idea was to extend it to scroll reveals, popover transitions, details/summary, etc.

jhey ʕ•ᴥ•ʔ

17,454 Aufrufe • vor 5 Monaten

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 indicator 🚀

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 indicator 🚀

jhey ʕ•ᴥ•ʔ

234,693 Aufrufe • vor 1 Jahr

CSS trick: transition `field-sizing: content` on a textarea with anchor

CSS trick: transition `field-sizing: content` on a textarea with anchor

Adam Argyle

17,109 Aufrufe • vor 22 Tagen

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇

Future CSS Tip! 🔮 You can anchor an element to multiple elements with anchor positioning .anchored { top: anchor(--a-1 bottom); left: anchor(--a-2 right); } Combine it with CSS mask to create some "Supercharged CSS ⚡️" Watch the debug below 👀 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

149,877 Aufrufe • vor 3 Jahren

Make your tooltips and menus stay in view with 3 lines of CSS 🤙 .menu { top: anchor(top); left: anchor(right); position-try-fallbacks: flip-block, flip-inline; } Property updated 📝 Responds to scroll, layout change, etc. Watch 👇 Anchor Positioning is coming 🚀

Make your tooltips and menus stay in view with 3 lines of CSS 🤙 .menu { top: anchor(top); left: anchor(right); position-try-fallbacks: flip-block, flip-inline; } Property updated 📝 Responds to scroll, layout change, etc. Watch 👇 Anchor Positioning is coming 🚀

jhey ʕ•ᴥ•ʔ

88,069 Aufrufe • vor 2 Jahren

CSS Tip! 🤙 You can create this magnetic :hover effect with CSS anchor positioning, :has, and zero JS 🔥 article { anchor-name: --develop; } ul:has(li:hover) { --anchor: --develop; } ul::after { inset: anchor(var(--anchor) top) anchor(var(--anchor) right) ... ; } How do you keep it clean when entering/exiting the list? Use transition-delay ⭐️ ul:has(li:hover) { --active: 1; } ul::after { opacity: var(--active, 0); transition: opacity 0.2s, inset 0.2s 0.2s; } ul:hover::after { transition: opacity 0.2s 0.2s, inset 0.2s; } This is a cool trick you can use. Delay the opacity on enter and then delay the position on exit. That way you don't get a weird effect on enter/exit 🙏 This one's a "Future" CSS tip 🔮 But, the demo will work in all browsers in some way. The idea is to progressively enhance it. 1. No JavaScript and no Anchor Positioning? Highlight on hover ✏️ 2. No Anchor Positioning? Use JavaScript with a single event listener to update the inset values using elementFromPoint and .closest 🫶 3. If there is Anchor Positioning support, use that and don't fire the JavaScript. You can check with CSS.supports('anchor-name: --anchor') ✨ That's it! CodePen.IO link below! 👇

CSS Tip! 🤙 You can create this magnetic :hover effect with CSS anchor positioning, :has, and zero JS 🔥 article { anchor-name: --develop; } ul:has(li:hover) { --anchor: --develop; } ul::after { inset: anchor(var(--anchor) top) anchor(var(--anchor) right) ... ; } How do you keep it clean when entering/exiting the list? Use transition-delay ⭐️ ul:has(li:hover) { --active: 1; } ul::after { opacity: var(--active, 0); transition: opacity 0.2s, inset 0.2s 0.2s; } ul:hover::after { transition: opacity 0.2s 0.2s, inset 0.2s; } This is a cool trick you can use. Delay the opacity on enter and then delay the position on exit. That way you don't get a weird effect on enter/exit 🙏 This one's a "Future" CSS tip 🔮 But, the demo will work in all browsers in some way. The idea is to progressively enhance it. 1. No JavaScript and no Anchor Positioning? Highlight on hover ✏️ 2. No Anchor Positioning? Use JavaScript with a single event listener to update the inset values using elementFromPoint and .closest 🫶 3. If there is Anchor Positioning support, use that and don't fire the JavaScript. You can check with CSS.supports('anchor-name: --anchor') ✨ That's it! CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

730,951 Aufrufe • vor 3 Jahren

configurable transition strips™ view transitions + css clip-path → copy to clipboard use for page transitions, theme switching, etc. 🧑‍🍳

configurable transition strips™ view transitions + css clip-path → copy to clipboard use for page transitions, theme switching, etc. 🧑‍🍳

jhey ʕ•ᴥ•ʔ

13,147 Aufrufe • vor 4 Monaten