2016/02/11
css
備忘録です。
先日、左右で違う背景画像を表示する方法について記述しましたが、今回は左右で背景色を変える方法です。
参考サイト
背景色を2色で分割表示する方法
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%);
2023/06/30
神社
御朱印
2023/06/15
Mac
Linux
2023/04/16
時宗
御朱印
2023/04/14
臨済宗
御朱印
2023/04/05
寺院
御朱印