linear-gradient()　②位置指定あり: cssカスタマイズ

2018年07月11日

linear-gradient()　②位置指定あり

◆方向、開始色、終了色の順番で指定
・方向は、方向名か角度で指定
・色は、色名、16進トリプレット(#------)、rgb、rgbaで指定

◆最初の色に位置指定（開始から指定位置までベタ塗り）

background-image:linear-gradient(to right,yellow 50%,aqua);
・開始～50%は黄色のベタ塗り
・50%～終了は黄色から水色へのグラデーション

◆最後の色に位置指定（指定位置から終了までベタ塗り）

background-image:linear-gradient(to right,yellow,aqua 50%);
・開始～50%は黄色から水色へのグラデーション
・50%～終了は水色のベタ塗り

◆同じ位置に2色指定（指定位置で前後の色の境界がはっきりする）

background-image:linear-gradient(to right,yellow 50%,aqua 50%);
・開始～50%は黄色のベタ塗り
・50%～終了は水色のベタ塗り

background-image:linear-gradient(to right,red, blue 50%,black 50%,white);
・開始～50%は赤から青へのグラデーション
・50%～終了は黒から白へのグラデーション

background-image:linear-gradient(to right,green 180px,orangered 180px,orangered 360px,black 360px);
・開始～180pxは緑のベタ塗り
・180px～360pxはオレンジレッドのベタ塗り
・360px～終了は黒のベタ塗り

posted by templayer at 22:59 | Comment(0) | TrackBack(0) | css

この記事へのコメント

コメントを書く

この記事へのトラックバックURL
https://fanblogs.jp/tb/7859637

※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック

国内旅行・国内ツアー JR＋宿泊セットプラン国内ホテル・旅館宿泊予約高速・夜行・深夜バスレンタカー観光クーポン海外ツアー・海外旅行海外航空券＋ホテル海外航空券・格安航空券海外ホテル・格安ホテル

国内旅行国内ツアー国内航空券レンタカー高速バス海外旅行海外ツアー海外航空券海外レンタカー・鉄道海外ホテルトラベルサポート割引クーポン懸賞広場観光案内ランキング

display:flex; filter: 　blur(); 　brightness(); 　contrast(); 　grayscale(); 　hue-rotate(); 　invert(); 　opacity(); 　saturate(); 　sepia(); linear-gradient() ①位置指定なし ②位置指定あり ③方向指定 repeating-linear-gradient()

アコーディオン開閉パネル　簡易版開閉パネル　詳細版開閉パネル　改良版絞り込み指定光と色の三原色旭日旗 Z旗日章旗　日の丸画像素材

cssカスタマイズ

広告

2018年07月11日

linear-gradient() ②位置指定あり

linear-gradient()　②位置指定あり