2018年07月09日
linear-gradient() ①位置指定なし
◆方向、開始色、終了色の順番で指定
・方向は、方向名か角度で指定
・色は、色名、16進トリプレット(#------)、rgb、rgbaで指定
◆色と色の間はグラデーションになる
background-image:linear-gradient(to top,yellow,aqua);
・下が黄色、上が水色
・中間は黄色から水色へのグラデーション
◆同じ色を続けて指定すればベタ塗りになる
background-image:linear-gradient(to right,yellow,yellow);
・黄色のベタ塗り
background-image:linear-gradient(to left,aqua,aqua);
・水色のベタ塗り
◆3色指定は2等分される
background-image:linear-gradient(to right,yellow,aqua,fuchsia);
・左端が黄色、真ん中が水色、右端がフクシャ（マゼンタ）
・開始～1/2は黄色から水色へのグラデーション
・1/2～終了は水色からフクシャ（マゼンタ）へのグラデーション
◆4色指定は3等分される
background-image:linear-gradient(to left,white,red,blue,black);
・右端が白、1/3地点が赤、2/3地点が青、左端が黒
・開始～1/3は白から赤へのグラデーション
・1/3～2/3は赤から青へのグラデーション
・2/3～終了は青から黒へのグラデーション
◆5色指定は4等分される
background-image:linear-gradient(to right,yellow,yellow,lime,aqua,aqua);
・左端と1/4地点が黄色、2/4地点がライム、3/4地点と右端が水色
・開始～1/4は黄色のベタ塗り
・1/4～2/4は黄色からライムへのグラデーション
・2/4～3/4はライムから水色へのグラデーション
・3/4～終了は水色のベタ塗り
◆6色指定は5等分される
background-image:linear-gradient(to left,red,red,blue,blue,green,green);
・右端と1/5地点が赤、2/5地点と3/5地点が青、4/5地点と左端が緑
・開始～1/5は赤のベタ塗り
・1/5～2/5は赤から青へのグラデーション
・2/5～3/5は青のベタ塗り
・3/5～4/5は青から緑へのグラデーション
・4/5～終了は緑のベタ塗り
◆7色指定は6等分される
background-image:linear-gradient(to bottom left,red,orange,yellow,green,blue,indigo,purple);
・右上が赤、1/6地点が橙、2/6地点が黄色、3/6地点が緑、
4/6地点が青、5/6地点が藍、左下が紫
・開始～1/6は赤から橙へのグラデーション
・1/6～2/6は橙から黄へのグラデーション
・2/6～3/6は黄から緑へのグラデーション
・3/6～4/6は緑から青へのグラデーション
・4/6～5/6は青から藍へのグラデーション
・5/6～終了は藍から紫へのグラデーション
・方向は、方向名か角度で指定
・色は、色名、16進トリプレット(#------)、rgb、rgbaで指定
◆色と色の間はグラデーションになる
background-image:linear-gradient(to top,yellow,aqua);
・下が黄色、上が水色
・中間は黄色から水色へのグラデーション
◆同じ色を続けて指定すればベタ塗りになる
background-image:linear-gradient(to right,yellow,yellow);
・黄色のベタ塗り
background-image:linear-gradient(to left,aqua,aqua);
・水色のベタ塗り
◆3色指定は2等分される
background-image:linear-gradient(to right,yellow,aqua,fuchsia);
・左端が黄色、真ん中が水色、右端がフクシャ（マゼンタ）
・開始～1/2は黄色から水色へのグラデーション
・1/2～終了は水色からフクシャ（マゼンタ）へのグラデーション
◆4色指定は3等分される
background-image:linear-gradient(to left,white,red,blue,black);
・右端が白、1/3地点が赤、2/3地点が青、左端が黒
・開始～1/3は白から赤へのグラデーション
・1/3～2/3は赤から青へのグラデーション
・2/3～終了は青から黒へのグラデーション
◆5色指定は4等分される
background-image:linear-gradient(to right,yellow,yellow,lime,aqua,aqua);
・左端と1/4地点が黄色、2/4地点がライム、3/4地点と右端が水色
・開始～1/4は黄色のベタ塗り
・1/4～2/4は黄色からライムへのグラデーション
・2/4～3/4はライムから水色へのグラデーション
・3/4～終了は水色のベタ塗り
◆6色指定は5等分される
background-image:linear-gradient(to left,red,red,blue,blue,green,green);
・右端と1/5地点が赤、2/5地点と3/5地点が青、4/5地点と左端が緑
・開始～1/5は赤のベタ塗り
・1/5～2/5は赤から青へのグラデーション
・2/5～3/5は青のベタ塗り
・3/5～4/5は青から緑へのグラデーション
・4/5～終了は緑のベタ塗り
◆7色指定は6等分される
background-image:linear-gradient(to bottom left,red,orange,yellow,green,blue,indigo,purple);
・右上が赤、1/6地点が橙、2/6地点が黄色、3/6地点が緑、
4/6地点が青、5/6地点が藍、左下が紫
・開始～1/6は赤から橙へのグラデーション
・1/6～2/6は橙から黄へのグラデーション
・2/6～3/6は黄から緑へのグラデーション
・3/6～4/6は緑から青へのグラデーション
・4/6～5/6は青から藍へのグラデーション
・5/6～終了は藍から紫へのグラデーション
この記事へのコメント
コメントを書く
この記事へのトラックバックURL
https://fanblogs.jp/tb/7859635
※言及リンクのないトラックバックは受信されません。
この記事へのトラックバック
