A Web Design Community curated by Chris Coyier.

CSS-Tricksにhr要素の表示をCSSを使ってカスタマイズする興味深いサンプルが掲載されている。グラデーション効果、破線効果、影付き効果、両端にデザインの追加、二重線と記号の配置などだ。注目したいのは画像などの要素を追加することなく、CSSのみでデザインを実施している点にある。手軽にデザインを変更する方法として興味深い。

グラデーションはbackground-imageにlinear-gradientを指定することで実現している。破線はborder-bottumにdashedの指定。影付き効果はbox-shadowが指定されている。興味深いのは両端にめくれ上がった線が2本記述されている7つ目のサンプルだ。基本的にはborder-radiusによる指定だが、height、border-width、margin-topなどをうまく組み合わせることでこれを実現している。

CSS Tricks, Simple Styles for <hr>'sより抜粋

8つ目のデザインも面白い。二重線で中央に「§」を表示するというものだが、これもすべてCSSで実施されている。border-topでdoubleを指定することで二重線を作成。text-alignはcenterに設定。これにさらに背景色を白にしたcontent: "§"をかぶせている。Simple Styles for <hr>'sにはそれぞれのhr要素に対するCSSも見やすくまとまっており参考になる。