閉じる
CSS
  • 2011.11.24 (Thu)

CSS3で作れるデザイン性のある罫線でサイトをもっとリッチに!! CSS3罫線チュートリアル

hr

CSS-TRICKSでCSS3を使った罫線チュートリアルを紹介してました。
ブラウザ間の問題はありつつもCSS3で罫線までデザイン性の高いものができてしまうCSS3ってほんと奥が深くて面白いですね。

CSS-TRICKS

Simple Styles for Horizontal Rules

プレビュー
罫線1

CSS

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

linear-gradientは線形グラデーションを指定する際に使用します。
それぞれのブラウザに対応した指定方法を記述する必要があります。
グラデーション対応

以下、CSS-TRICKSで紹介していたチュートリアル以外に2つほど遊んでみました

おまけ

Style <hr> 2を改造してみました

スタイル9

CSS

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

罫線をレインボーに

スタイル10

CSS

hr.style-ten {
	border: 0;
    height: 1px;
	background: -moz-linear-gradient(left, rgb(255,0,102) 0%, rgb(181,97,214) 27%, rgb(57,124,200) 49%, rgb(0,193,164) 73%, rgb(247,193,46) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0, rgb(255,0,102)), color-stop(0.27, rgb(181,97,214)), color-stop(0.49, rgb(57,124,200)), color-stop(0.73, rgb(0,193,164)), color-stop(1, rgb(247,193,46))); 
	background: -o-linear-gradient(top left, rgb(255,0,102), rgb(181,97,214), rgb(57,124,200), rgb(0,193,164), rgb(247,193,46));
}

レインボーグラデーションのクロスブラウザはsafari・chrome・firefox・operaと確認済みです。

まだまだ、やり方次第で色んなバリエーションの罫線ができるので、ぜひ試してみてはいかがでしょうか。