CSS3 radial-gradient() 円形グラデーション
今回は、CSS3の「radial-gradient()」について書きます。
「radial-gradient()」は、円形グラデーションを指定するときに使います。
基本的な所は、線形グラデーションの「linear-gradient()」と同じです。
基本の使い方は、こちらです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>css3</title> <style> div { width: 200px; height: 200px; background: radial-gradient(red,green); } </style> </head> <body> <div id="maru"></div> </body> </html>
実行結果
radial-gradient()は、こんな感じに使っています。
background: radial-gradient(red,green);
radial-gradient()の書式はこうなっています。
radial-gradient(開始位置と角度, 形状とサイズ, 開始色, 途中色, 終了色);
上のプログラムですと、開始色が赤(red)、終了色が緑(green)となっています。
また、「 -webkit-」などのベンダープレフィックスは、適宜つけてください。
ここからは、もう少し詳しく書きます。
- 途中色
途中色を使用すると、開始色と終了色の間にもう一つ色を追加できます。
途中色を使うと、こうなります。
background: radial-gradient(red,green,blue);
開始色にred、途中色にgreen、終了色にblueを使用しています。
- 色の割合
色の割合も変更できます。
変更するには、「%」などを使います。
background: radial-gradient(red 10%,green 60%,blue 30%);
「red 10%」のように色の後ろに「10%」と書きます。
- グラデーションの形状
通常のグラデーションの形状は、楕円です。
楕円の形を正円に変えることができます。
やり方は、簡単です。
色を指定している前に、「circle」とつければokです。
radial-gradient(circle,red,green);
さらに、こちらの機能にはオプションが複数あります。
ここでは、オプションの1つの「contain」を紹介します。
オプションの指定方法は、「circle」の後ろに書きます。
-webkit-radial-gradient(circle contain,red,green);
「contain」は、円が含まれるように描画してくれます。
円全体が描画している事がわかります。
他にもあるので、興味がある方は調べてみてください^^