スポンサーリンク
スポンサーリンク

線形グラデーションを設定する。

CSS

CSS3から背景やボーダーにグラデーションを付すことが
できるようになっています。

表現できるグラデーションには、円形グラデーションと
線形グラデーションの2つがあります。

説明
linear-gradient 線形グラデーション
radial-gradient 円形グラデーション

方法は?

上記で紹介したものは値ではないです。
backgroundプロパティの値として設定します。

線形グラデーションは linear-gradient という値を使う

「linear-gradient()」の()の中には、下記のよう関数を指定します。

background:linear-gradient(left,#ffffff,#888888,#00ff00);

・この意味は、leftはグラデーションの開始位置を表します。
 今回は左から
・#ffffffはグラデーションの開始の色を設定します。
・#888888は途中の色を設定します。
・一番右の#00ff00は終了時の色を表します。

実際にサンプルコードを載せます。

linear-gradient動かない場合

多くのブラウザでlinear-gradientは動きません。
私が使っているブラウザでも動きません。

なので、各ブラウザに対応させるため
CSSのサンプルコード15行目~22行目のようにします。
Chrome「-webkit」
Firefox「-moz-」
Opera「-o-」
Internet Explore「-ms-」というように
値の前に書きます。

これをベンダープレフィックスといいます。

次回は円形グラデーションについて書きます。

コメント

タイトルとURLをコピーしました