CSS3から背景やボーダーにグラデーションを付すことが
できるようになっています。
表現できるグラデーションには、円形グラデーションと
線形グラデーションの２つがあります。
| 値 | 説明 |
| linear-gradient | 線形グラデーション |
| radial-gradient | 円形グラデーション |
方法は？
上記で紹介したものは値ではないです。
backgroundプロパティの値として設定します。
線形グラデーションは linear-gradient という値を使う
「linear-gradient()」の()の中には、下記のよう関数を指定します。
background:linear-gradient(left,#ffffff,#888888,#00ff00);
・この意味は、leftはグラデーションの開始位置を表します。
今回は左から
・#ffffffはグラデーションの開始の色を設定します。
・#888888は途中の色を設定します。
・一番右の#00ff00は終了時の色を表します。
実際にサンプルコードを載せます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
*{margin:0;padding:0;} #container{ width:640px; height:400px; background-color:#f0f0f0; margin:0 auto; } .box{ margin:8px; width:240px; height:240px; /* Chrome */ background:-webkit-linear-gradient(left, #ffffff, #888888, #00ff00); /* Firefox */ background:-moz-linear-gradient(left, #ffffff, #888888, #00ff00); /* Opera */ background:-o-linear-gradient(left, #ffffff, #888888, #00ff00); /* InternetExplore */ background:-ms-linear-gradient(left, #ffffff, #888888, #00ff00); } .fleft{float:left;} |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>HTMLのメモ</title> <link rel="stylesheet" href="test.css"> </head> <body> <div class="box"> </div> </body> </html> |
linear-gradient動かない場合
多くのブラウザでlinear-gradientは動きません。
私が使っているブラウザでも動きません。
なので、各ブラウザに対応させるため
CSSのサンプルコード15行目~22行目のようにします。
Chrome「-webkit」
Firefox「-moz-」
Opera「-o-」
Internet Explore「-ms-」というように
値の前に書きます。
これをベンダープレフィックスといいます。
次回は円形グラデーションについて書きます。