Browse: Home » CSS

CSS

CSSでグラデーション状の仕切り線を作成する。

7454501e91e87f88b35b56e171b34a95

ラインの両端を背景色になじませることで、リッチな仕切り線を作成できる。
上記の例は以下のようなコードで実装可能。

■HTML

1
2
3
4
<hr class="gradLine gray">
<hr class="gradLine blue">
<hr class="gradLine green">
<hr class="gradLine red">

■CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
body {
    background-color:#000;
}
 
.gradLine {
    border: 0;
    height: 1px;
}
 
.gradLine.gray {
    background: -webkit-linear-gradient(left, #000 0%, #ccc 30%, #ccc 70%, #000 100%);
}
 
.gradLine.blue {
    background: -webkit-linear-gradient(left, #000 0%, #00bfff 30%, #00bfff 70%, #000 100%);
}
 
.gradLine.green {
    background: -webkit-linear-gradient(left, #000 0%, #adff2f 30%, #adff2f 70%, #000 100%);
}
 
.gradLine.red {
    background: -webkit-linear-gradient(left, #000 0%, #ff6347 30%, #ff6347 70%, #000 100%);
}

上記はWebkit系のブラウザのみでしか動作しないので注意。マルチブラウザ対応にする場合は、linear-gradientプロパティに対して適宜ベンダープレフィックスを追加してやる必要がある。

2013/08/12 _onichannn , ,