CSSのグラデーションで美しく彩る

最近、CSSが非常に便利になり、
今まで特別に画像を準備していたところがどんどんCSSで設定できるようになりました。

今回はお気に入りのグラデーションcssの使い方を紹介します。

グラデーションの基本:linear-gradient

一番簡単なグラデーションはbackgroundでを設定する方法。
感覚としては、background-imageを設定するところを、色指定することです。

種類としては linear-gradient (線状)と radial-gradient (放射状)がありますので、
一つを選び、そこへ2色を設定します。

See the Pen gradient1 by fumika (@fumika-elp) on CodePen.

今度は上下のグラデーションを左右の方向へ変えてみましょう。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

See the Pen gradient2 by fumika (@fumika-elp) on CodePen.

ざっとこんな感じです。

次は複数の色を使ってカラフルに彩ります。
この場合は各色に幅がデファルトで均等になっていることにご注目ください。

See the Pen gradient3 by fumika (@fumika-elp) on CodePen.

暖かみもあり、注目を集めやすい:radial-gradient

今度はページの真ん中へ注意を集める場合にも役立つradial-gradientです。
中心点が強調されたり、色合いによっても暖かみのあるページをつくることができます。

See the Pen gradient4 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

Share

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Optionally add an image (JPEG only)