[CSS]コンテンツの区切り hr要素を素敵にデザインするスタイルシートのテクニックのまとめ

コンテンツの区切りに使用するhr要素をCSS3で素敵にデザインするスタイルシートのテクニックを紹介します。

borderプロパティを使ったシンプルなものから、グラデーションやトランスフォームや疑似要素を使ったかなり凝ったものまで、コピペで簡単に利用できます。

区切り線のスタイルいっぱい

ちょっと長いですが、全部で41種類です。
まずは、シンプルなものから。

デモのキャプチャ

18 Simple Style for Horizontal Rules

HTMLの「.style**」は数字を順番に入れて、ご利用ください。

デモのキャプチャ

18 Simple Style for Horizontal Rules

HTMLの「.style**」は数字を順番に入れて、ご利用ください。

デモのキャプチャ

18 Simple Style for Horizontal Rules

HTMLの「.style**」は数字を順番に入れて、ご利用ください。

デモのキャプチャ

HR with centered text

デモのキャプチャ

HR Department

デモのキャプチャ

HR Department

デモのキャプチャ

HR Department

デモのキャプチャ

HR Department

デモのキャプチャ

Some HR Styles

デモのキャプチャ

Verticle<HR>

sponsors

top of page

©2018 coliss