ZEROBASE、web制作部 ディレクターの山田です！
今回はCSSでグラデーションを実装する方法を簡単に説明いたします。
これを行うことにより、わざわざ画像で毎回作り直すことなく、色の調整が出来るので、
作業効率アップにつながります。
それでは行きますよーLet’s GO GO GO!
See the Pen
Untitled by 山田陽介 (@hlfifjwz-the-bold)
on CodePen.
まずプロパティですがbackground：linear-gradientを使用します。関数内のtoは方向を表します。rightなので右方向に青からピンクにという指定ですね。
See the Pen
Untitled by 山田陽介 (@hlfifjwz-the-bold)
on CodePen.
色の幅ですがpxでも%でも指定できます。今回の場合は左方向にまずlime28px続いて%表示の場合、開始点と終了点を指定できますが、一つの場合は終了点のみになり左から77%の位置までとなります。
See the Pen
Untitled by 山田陽介 (@hlfifjwz-the-bold)
on CodePen.
続いてプロパティ名をbackground: radial-gradientにすると放射状のグラデーションを実装できます。
See the Pen
Untitled by 山田陽介 (@hlfifjwz-the-bold)
on CodePen.
conic-gradientは角度指定のプロパティです。コードを翻訳すると12時の位置から時計方向に45°まで赤、終了点50%までオレンジ、85%まで黄色、残り緑です。
総括
以上のようにCSSでも簡単にグラデーションを実装できます、実際の業務では合わせてopacityで不透明度を落として画像に載せるかとは思いますが、、、色々と表現できるので皆さんも遊びながら、学びを深めていきましょう！
ではではーーさよならサンキュー
