hrのデザイン

hr要素をCSS3でいろいろなデザインに装飾する方法です。
画像を使わないため、画像のスライスや読み込みも早くなるので、使用場面によって便利な技です。

両端が細い罫線のデザイン

.hr-style{
    border: 0;
    height: 1px;
    background: #333;
    background-image: -webkit-linear-gradient(left, #666, #333, #666);
    background-image:    -moz-linear-gradient(left, #666, #333, #666);
    background-image:     -ms-linear-gradient(left, #666, #333, #666);
    background-image:      -o-linear-gradient(left, #666, #333, #666);
}

半透明のグラデーションを使用した罫線はrgbaを使用することで可能です。

.hr-style{
  border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.5), rgba(0,0,0,0));
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.5), rgba(0,0,0,0));
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.5), rgba(0,0,0,0));
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.5), rgba(0,0,0,0));  
}

hrにはドロップシャドウをつけることもできます。

.hr-style{
    height: 10px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0,0,0,0.8);
}

画像を使わないで罫線をスタイリングできれば、ページごとにスライスしなおしたり、デザインの修正が来た場合でもすぐに対応できるので、こういった装飾部分はcssで行っていきたいですね。