グラデーションの基本：linear-gradient
一番簡単なグラデーションはbackgroundでを設定する方法。
感覚としては、background-imageを設定するところを、色指定することです。
種類としては linear-gradient （線状）と radial-gradient （放射状）がありますので、
一つを選び、そこへ２色を設定します。
See the Pen gradient1 by fumika (@fumika-elp) on CodePen.
今度は上下のグラデーションを左右の方向へ変えてみましょう。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
See the Pen gradient2 by fumika (@fumika-elp) on CodePen.
ざっとこんな感じです。
次は複数の色を使ってカラフルに彩ります。
この場合は各色に幅がデファルトで均等になっていることにご注目ください。
写真に重ねるグラデーション
それでは実際にホームページのトップで使いそうな画像にグラデーションを掛けてみましょう。
いつものbackground-image を設定する前に, gradientの種類を選び、色を選択してから、background-imageのurlを設定します。
See the Pen gradient5 by fumika (@fumika-elp) on CodePen.
まぁ〜、かわいい。
今まで別で画像を準備していたのが、CSS内で全て解決できるようになりました。
CSSのグラデーションは色んな面で活用できます。
今回引用した英語サイトではグラデーションのボーダー設定なども紹介していますので、
ぜひご覧ください。→How to Use CSS Gradients on the Web
