[CSS] hrタグで作成する区切り線のデザインを色々と変更する方法

こんにちは、@yoheiMuneです。
今日は、hrタグ（水平線を描画する要素）のデザインをカスタマイズする方法をブログに書きたいと思います。
区切り線をデザインできるって最近知ってびっくりしたので、備忘録の意味も込めて(*´∇｀*)

hrタグのデザインをカスタマイズする方法

hrもHTML要素の一つなので、CSSでデザインすることが出来ます。
気付いたら単純な事ですが、hrをカスタマイズする機会が無かったので、知りませんでしたw。

例えば以下のようなデザインを行うことが出来ます。



上記のHTMLは以下のようになります。

<hr class="bar1">

<hr class="bar2">

<hr class="bar3">

<hr class="bar4">

そしてCSSが以下のようになります。

/* hr線の色を変えてみたバージョン */
.bar1 {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #ffaaaa;
  border: 0;  /*デフォルトデザインでは線がある場合があるので、消しておく。*/
}

/* hr線をダッシュ線にしてみたバージョン */
.bar2 {
  display:block;
  width: 100%;
  height: 1px;
  border: 0;
  border-top: 1px dashed #cccccc;
}

/* hr線を背景グラデーションを使って作ってみたバージョン */
.bar3 {
  display:block;
  width: 100%;
  height: 10px;
  border: 0;
  border: 1px solid #cacaca;
  -webkit-border-radius: 10px;
  background: #005500; /* Old browsers */
  background: -moz-linear-gradient(left,  #005500 0%, #52b152 20%, #83c783 51%, #008a00 76%, #005500 96%, #005700 100%, #005500 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#005500), color-stop(20%,#52b152), color-stop(51%,#83c783), color-stop(76%,#008a00), color-stop(96%,#005500), color-stop(100%,#005700), color-stop(100%,#005500)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left,  #005500 0%,#52b152 20%,#83c783 51%,#008a00 76%,#005500 96%,#005700 100%,#005500 100%); /* Chrome10+,Safari5.1+ */
  background: linear-gradient(to right,  #005500 0%,#52b152 20%,#83c783 51%,#008a00 76%,#005500 96%,#005700 100%,#005500 100%); /* W3C */
}

/* hr線の背景に画像を用いたバージョン */
.barX {
  display: block;
  border: 0;
  width: 100%;
  height: 28px;
  background: url("hr-bar.gif") no-repeat top center;
  -webkit-background-size: 512px 28px;
}

上記の感じで色々とデザインを変更することが出来るようです。
工夫すれば凝ったデザインも出来るのかなぁ。

最後に

hr線ってカスタマイズできるんだーと、一つまた知識が増えて良かったです(・∀・)
HTMLの意味を損なわないようにマークアップしつつ、デザイン屋さんの要望にも応えられるよう、 今後も色々とマークアップを学んで、ブログにアウトプットしていきたいと思います。

最後までご覧頂きましてありがとうございました。