CSSはどんどん進化している！ マグネットのようにくっつくエフェクトを実装するテクニック -CSS Anchor Positioning

ナビゲーションのアイテムをホバーした時にマグネットのようにくっついてスライドさせるエフェクトをCSSで実装するテクニックを紹介します。 これまでは、JavaScriptがないと実装できないエフェクトでした。レスポンシブにも完全対応、アイテムが二段・三段と複数になっても、水平・垂直になってもエフェクトは追従します。 Anchor Magnet Slide Menu 実際の動作は、デモページでお楽しみください。 右上の矢印アイコンをクリックすると、アイテムの並びが垂直・水平になります。また、右下のアイコンをクリックすると、ダーク・ライトモードになります。 ※CSSのみで動作するのは、Chrome 125+です。それ以外のブラウザはポリフィルが使用されています。 See the Pen Anchor Magnet Slide Menu by coliss (@coliss) on CodePen

[coliss]

ナビゲーションのアイテムをホバーした時にマグネットのようにくっついてスライドさせるエフェクトをCSSで実装するテクニック

[Magicant]

CSS のプログラミング言語化がさらに進んだなあと思ふと同時にどんどん書きやすく読みやすい言語ではなくなってきたなあとも

[korint]

今のCSSいじる人ってどんな属性の人なんだろ？もうデザイナーだと厳しそう。

[eartht]

jsとcssの役割が曖昧になっていくなぁ。良いのか悪いのか…コードに苦手意識のある非専門職には辛い展開かもなぁ

[spark7]

装飾のためではなく、ツールチップとかを想定してるのか https://www.w3.org/TR/css-anchor-position-1/

[Shinwiki]

進化と迷走はちがうものです。

[kenzy_n]

CSSもなかなか面白い表現を実装できるようになってきた。

[x100jp]

かっくいー。