先日、当ブログで紹介したThe State of CSS 2020(紹介記事)に使用されているホバーエフェクトが話題になっていたので、紹介します。 テキストリンクをホバーすると、ラインを引くまでは普通のアニメーションですが、ホバーを外した時に通常とは逆方向で元の状態に戻ります。 ラインが一方向にスーッと通り過ぎるような感じです。
![CSSの見過ごしがちだけど興味深い実装テクニック、ホバーでラインを引いて逆方向で元の状態に戻すエフェクト](https://cdn-ak-scissors.b.st-hatena.com/image/square/06b5bc21aafb6717ec8401f40e21467c29f8c78c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202004%2F2020121101.gif)
先日、当ブログで紹介したThe State of CSS 2020(紹介記事)に使用されているホバーエフェクトが話題になっていたので、紹介します。 テキストリンクをホバーすると、ラインを引くまでは普通のアニメーションですが、ホバーを外した時に通常とは逆方向で元の状態に戻ります。 ラインが一方向にスーッと通り過ぎるような感じです。
11 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 CSS の font-family はフォント名を複数指定して、このフォントがなかったら次、みたいにすることができます。また serif のような、環境に依存する緩い指定である総称フォントファミリー (generic font family) もあります。 CSS で何のフォントが指定されているかは Elements パネルのスタイル欄に出ていますが、最終的にどのフォントが利用されているのかというのも、実はパネル内で見つけることができます。 たくさん並んでるけど結局今見えてるのどれ? 指定したやつちゃんと利いてる? フォールバックになってない? みたいなときに。 利用されているフォント名を探す Elements パネル → Computed を開く 一番下 Rendered Fon
12 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 スタイルの微調整って Elements パネルでやるじゃないですか。数字変えたり色変えたり。あるいはレイアウト崩れたときに Elements パネルであっちこっちいじりながらデバッグしたりとかも。で、あれこれ変えてよし完璧ってなって、はてどこを変更したっけなと。そういう経験は皆さんおありだと思います。あるよね? Chrome DevTools でローカルのフォルダーを開いておくと、localhost での変更をそのままファイルに反映、つまり Elements パネルで調整した CSS を保存することができます。 【書いた】DevToolsをIDE化するやつです / Elementsパネルで編集したCSSをそのままファイルに保存する(ひとり DevTools Advent Calen
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く