[B! 小ネタ] shishikabaのブックマーク

CSSのinsetプロパティで上下左右の中央に配置する時の「position: fixed;」での新しい記述方法

中央揃えの古典的なテクニックの一つ、モーダルやメッセージなどを表示する時に適したposition: fixed;での新しい記述方法を紹介します。古い記述方法では、負のパーセンテージを使用していたり、あまり直感的ではないCSSでしたが、新しい記述方法ではそれらが解消されています。 CSSの中央揃えのいろいろな方法は、以前の記事をご覧ください。現在主流の5つのテクニックからそれぞれの特徴と最も万能で信頼できるテクニックを評価しています。

shishikaba 2021/07/12

リンク

CSSの見過ごしがちだけど興味深い実装テクニック、ホバーでラインを引いて逆方向で元の状態に戻すエフェクト

先日、当ブログで紹介したThe State of CSS 2020（紹介記事）に使用されているホバーエフェクトが話題になっていたので、紹介します。テキストリンクをホバーすると、ラインを引くまでは普通のアニメーションですが、ホバーを外した時に通常とは逆方向で元の状態に戻ります。ラインが一方向にスーッと通り過ぎるような感じです。