https://buildstd.com/html-css-tips02/

いざという時のために覚えておくと便利なHTML＆CSS Tips集の第2弾です。何かで困った時に読み返してみてください。何かでお役にたてると思います。

BUILD

1. グラデーションを使ったテキストアニメーション：CSSグラデーションアニメーションツールの「FUZE」を使うと、色のイメージを確認しながらCSSコードを取得することができるので便利。
2. 縁取りテキスト：text-stroke を使うことで簡単に縁取り文字が設定可。執筆時（2023年10月現在）では、全モダンブラウザでベンダープレフィックス（-webkit-）が必要。
3. テキストのインフィニティループ：
4. PCのみhoverを適用する：正確には、メディアクエリでhover に対応しているデバイスのみに適用。スマホやタブレットで、リンクをタップした際に一瞬出てくる変化を止めることを目的としている。
5. スムーズなカウントアップアニメーション：このコードはOpenType フォントのみに適用。
6. コンテンツの表示順を変更する：HTMLの記述順を変えずに、CSSのFlexboxを使ってコンテンツの表示順番を変更。
7. CSSのみでスムーススクロール：画面上部にヘッダーなどを追従している場合には、scroll-margin-top でスムーススクロール後の位置調整。