フォームの中でも「区切り線・水平線」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。
kodocode (2022-08-24)
https://kodocode.net/design-css-horizontalbars/
- 基本的なhrタグのバリエーション一覧 その①：通常の横線から、点線、二重線、影を付けた線、切り取り線、等。
- 基本的なhrタグのバリエーション一覧 その②：通常の横線、点線、二重線、影付き、グラデーション等、hrタグの基本的をまとめたもの。色付き。
- ３つの点のみで区切りを表現：CSS上はcontent: ‘•••’となってるので、中身の文字を変更すれば●の数を変更したり◆に変更したりすることも可能。
- hrタグの上にワンポイントの画像アイコンを乗せたデザインサンプル：Font AwesomeをCSSのcontentプロパティで使用。
- 見出しタグ（h1、h2）、段落タグ（p）を区切り線として使ったサンプル：見出しタグ（h1、h2）、段落タグ（p）をCSSでデザイン調整して、区切り線として使っている。
- 囲み枠の見出しが区切り線を兼ねているサンプル：見出しタグを区切り線としても使っている。
- hrタグと同じデザインにpタグを調整：通常のhrタグと全く同じデザインで、文字を乗せた区切り線をpタグで実装。文字無しの区切り線と文字有りの区切り線を併用したい場合に参考になる。
- ファンシーな雰囲気の区切り線：ファンタジー小説の物語のあらすじなどで出てきそうな区切り線。
- ホラーな雰囲気の区切り線：蜘蛛の巣がくっついた区切り線。ホラーやお化け屋敷、ハロウィーンのサイトに使うと合いそう。
- 微妙に動いている虹色区切り線：7色のレインボー区切り線が、微妙にアニメーションで動いている。