しかし今は、CSSだけでグラデーションを再現する事が可能です。
今回は、CSSでグラデーションを表現する方法の紹介です。
1.グラデーションを入れるdivのブロックを用意する
まず、元となるHTMLを用意します。<div class="gra"></div>
このdivタグにグラデーションを入れていきます。
まず、要素のない空divなので、横幅と高さを指定しておきます。
CSS
.gra{
width:200px;
height:200px;
}
この状態だと、まだブラウザには何も表示されませんが、縦横200pxのdivのボックスがあります。
2.グラデーションを設定する
CSSでグラデーションを指定するには、background-imageプロパティを使います。このプロパティの値に、グラデーションの設定をしていきます。
グラデーションには、線形、放射、扇型の三種類があります。
今回は、一番よく使うであろう線形グラデーションを使っていきます。
background-imageに、以下のフォーマットで値を書いていきます。
linear-gradient(グラデーションの向き,開始色,終了色);
他のプロパティの値に比べ、記述が長くなるので注意してください。
ひとまず、以下のコードを追記します。
CSS
.gra{
width:200px;
height:200px;
background-image: linear-gradient(to top, red, blue);
}
以下の様に表示されます。
2-1.グラデーションの色数を増やす
グラデーションに使う色数は、「,」で区切る事で、何色でも設定する事が出来ます。
例えば、先ほどのグラデーションの設定を、以下の様に書き直してみます。
CSS
.gra{
〜省略〜
background-image: linear-gradient(to top, red, green,blue);
}
以下の様に表示されます。
この様に、複数の色を設定する事ができます。
2-2.色の変化を調整する
通常、色だけを指定した場合、その中間で色が交差する様に表示されます。例えば、２色でグラデーションを設定した場合、ちょうど50%の位置で色が変わっていきます。
この、色が変わる場所を、%を指定する事で、調整する事ができます。
以下の様に書き直してみます。
CSS
.gra{
〜省略〜
background-image: linear-gradient(to top, red 80%, blue);
}
以下の様に表示されます。
これは、80%までは、赤で表示され、そこからグラデーションが開始する事を表します。
今回は、一つ目の色にだけグラデーションの位置を設定していますが、全ての色にグラデーションの位置を設定する事が可能です。
ただし、前の色の位置と矛盾する形で設定することはできません。
2-3.グラデーションの向きを斜めにする
グラデーションの向きは、to top(上へ)やto right(右へ)などの指定方法の他、細かく角度を設定することも可能です。以下の様に書き直します。
CSS
.gra{
〜省略〜
background-image: linear-gradient(45deg, red, blue);
}
グラデーションは、設定方法によって、様々な使い方があるので、基本をマスターしておきましょう。
