linear-gradient
こんにちは。
ここ数日、現在作成してるWEBアプリケーションのTopページを作成するにあたり、
Dropboxのサイトのページがシンプルで気に入ったので模倣することにしました。
この２色に分かれたbackground-colorをどうやって実現するのかがパッと思いつかなかったので、ソースを見てみると linear-gradient というの使っていました。
このlinear-gradientを使うと、色のグラデーションをつけられるようです。
linear-gradient(方向, 開始色, 終了色)
私は「水平方向」に「画面66％まで青」で「画面34%が白」という感じにしたかったので、使い方としては次のように書けばできました。
linear-gradient(90deg, #91e4fb 66.666%, #ffffff 33.334%)
%と使うと、その範囲はグラデーションをつけずに一色にするので、青と白どちらとも%を使って固定色にしました。
