相模原市WEBサイト制作・カスタム・修復

Blog

2016/02/11

css

備忘録です。

先日、左右で違う背景画像を表示する方法について記述しましたが、今回は左右で背景色を変える方法です。

CSS

.test{
    background:linear-gradient(90deg,blue 0%,blue 50%,red 50%,red 100%);
}

サンプル

グラデーションを表示するlinear-gradientを使用します。
https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient#Browser_compatibility
↑　linear-gradientに関する詳細です。

http://caniuse.com/#feat=css-gradients
↑　各ブラウザでの実装状況早見です

書式は...

background:linear-gradient(方向角度,色　位置,色　位置,...);

・方向角度
グラデーションの向きです。
0deg　　　 ↑ 　 (下から上へ)
90deg　　 → 　 (左から右へ)
180deg 　 ↓ 　 (上から下へ)
270deg 　 ← 　(右から左へ)

角度ではなく以下のキーワードで指定することも可能です。
to top　　　＝　0deg (下から上へ)
to right　　＝　90deg(左から右へ)
to bottom　＝　180deg(上から下へ)
to left　　　＝　270deg(右から左へ)

background:linear-gradient(to right,blue 0%,blue 50%,red 50%,red 100%);

方向角度を省略した場合は自動的に「to bottom(180deg)　上から下へ」となります。

・色　位置
実際にコードと結果を照らし合わせると分かり易いです。

下記は0%から100%にかけて、青色から赤色へと徐々に変化していきます。
(0%がスタート位置、100%がゴール位置)

background:linear-gradient(to right, blue 0%, red 100%);

下記のように位置を省略した場合にも、青から赤へのグラデーションという意味になります。

background:linear-gradient(to right,blue,red);

色やパーセント指定を変えることにより、いろいろと応用ができます。

transparentを使うと透過にできます。
下記は両サイドが透過、真ん中が赤のパターン

background:linear-gradient(90deg,transparent 0%,red 30%,red 70%,transparent 100%);

«前の記事

一覧に戻る