CSSのみで実現する背景グラデーションは既に世の中に知れ渡っていて作成ツールまでありますが、その色を次々と変化させることもできます。
CSS詳しい方なら想像できると思いますが、グラデーションにアニメーションをミックスします。
背景グラデーションとは、背景色が徐々に別の色に変化する効果のことです。
CSSのみで背景グラデーションを作成するには、backgroundプロパティにlinear-gradient()関数やradial-gradient()関数を使います。
これらの関数は、グラデーションの方向や形、色の変化点などを指定できます。
CSSの書き方
グラデーションの基本的な設定例
例えば、以下のCSSコードは、左上から右下に向かって赤から青に変化する背景グラデーションを作成します。
|
1 2 3 |
body { background: linear-gradient(to bottom right, red, blue); } |
linear-gradient()関数の第一引数には、グラデーションの方向を指定します。to bottom rightとすると、左上から右下に向かってグラデーションが作られます。
第二引数以降には、グラデーションの色を指定します。redとblueとすると、赤から青に変化します。
色の間には自動的にスムーズな遷移が作られますが、変化点を明示的に指定することもできます。
例えば、red 20%, blue 80%とすると、赤から青への変化が20%から80%の範囲で起こります。
グラデーションの方向を変える（応用編）
radial-gradient()関数は、円形や楕円形のグラデーションを作成します。
第一引数には、グラデーションの形やサイズ、中心位置を指定します。
第二引数以降には、グラデーションの色を指定します。
例えば、以下のCSSコードは、中心が画面の中央で半径が50%の円形グラデーションを作成します。
色は白から黒に変化します。
|
1 2 3 |
body { background: radial-gradient(circle 50% at center, white, black); } |
circle 50%とすると、円形グラデーションで半径が50%になります。at centerとすると、中心が画面の中央になります。whiteとblackとすると、白から黒に変化します。
その他の設定例とサンプル
以前からリスペクトしているWebクリエイターボックスさんのサイトがすごく参考になります。
ソースコードも付いていますので、とてもわかりやすと思います。
CodePenを拝借。
See the Pen Colourful gradient animation by Mana (@manabox) on CodePen.
実際に4月1日の記事で利用しているサンプルがありますのでご覧ください。
作成ツール
参考サイトにも紹介されていた、こちらのサイトで簡単に作成できます。
背景にしたい色と、角度、それから変更スピードを選択するだけで作成できます。
グラデーションの背景に画像を入れたり、透過も駆使することで、あなたのサイトをもっとカッコイイ背景に変更しましょう！
以上がCSSのみで色が変化する背景グラデーションを作成する方法です。
CSSコードを試してみてください。
ポチップ
コメント