CSS3 線形グラデーション linear-gradient()
今回は、CSS3の「linear-gradient()」について書きます。
linear-gradient()は、線形グラデーションを指定するときに使います。
グラデーションは、上の写真のように、徐々に色が濃くなり薄くなる感じものです。
基本的にこのように使います。
linear-gradient(red,blue);
1番目は、開始色で、2番目は終了色です。(上のプログラムだと、redが開始色、blueが終了色です)
実際のプログラムで、試してみます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>css3</title> <style> div { width: 200px; height: 200px; background-color: red; border: 5px solid orange; background: linear-gradient(red,yellow); } </style> </head> <body> <div id="maru"></div> </body> </html>
実行結果
ここからは、もう少し詳しく「linear-gradient」について書きます。
・途中色をつけれます。
linear-gradient(red,blue,pink);
/*(開始色,途中色,終了色)*/
1番目は開始色、2番目は途中色、3番目が終了色となります。
・色の割合も調節できます。
linear-gradient(red 10%,blue 20%,pink 70%);
色の後ろに「%」または「px」で指定すると割合を調節できます。
・グラデーションを始める位置を変更できます
開始位置は、left,right,top,bottomで指定します。
-webkit-linear-gradient(left, #ff0000, rgba(255,0,0,0)); /*(開始位置,開始色,終了色)*/
今回は、「-webkit-」をつけています。「linear-gradient」だけだとchromeでは、反応がありませんでした。
ちなみに、
-webkit-linear-gradient(left top, #ff0000, rgba(255,0,0,0));
開始位置は、2つでも指定できます。
また、
-webkit-linear-gradient(45deg, #ff0000, rgba(255,0,0,0));
「45deg」のように度数で指定することもできます。