こんにちは、「なゆた」です！
突然ですが、CSSの基礎についての記事を書いた時、
グラデーションの作り方を皆さんにまだ教えていませんでした。
僕もそれにうっかり気づき、早く教えてやらなきゃと思いました（笑）。
なので、CSSでのグラデーションの作り方についてを教えていきたいと思います。
グラデーションの作り方を知りたい人
線形グラデーション
まずは、「線形グラデーション」から。
まず、HTML上でdivタグを作ります。
div以外にタグはいらないですし、文字は何も入れなくてもOKです。
次に、divタグのCSSで、「background」内に「linear-gradient」を作ります。
（）内は、必ず「濃い色, 薄い色」を入力しましょう。また、幅と高さは均等にすること。
すると・・・上から下へとわたる、きれいなグラデーションが出来上がりました！
また、「to right」と追加で入力すると、左から右へ。
「to left」と入力すると、右から左へと向きが変わるんです！
対角グラデーション
次は、ななめに見せる「対角グラデーション」。
「linear-gradient」内に「to bottom right」と入力すると、左上から右下へ。
「to bottom left」と入力すると、右上から左下へ。
「to top right」と入力すると、左下から右上へ。
「to top left」と入力すると、右下から左上へと向きを変えることもできちゃうんです。
放射グラデーション
３つ目は、薄い色の部分がうっすら丸く見える「放射グラデーション」。
HTML上で作ったdivタグはそのままに、
divタグのCSSで、「background」内に「radial-gradient」を作ります。
（）内は、必ず「濃い色, 薄い色」を入力しましょう。また、幅と高さは均等にすること。
すると・・・濃いほうの色がうっすら丸く見える、放射風のグラデーションが出来上がりました！
また、１色追加したり、色の大きさを変えたりすることもできます。
お好きなグラデーション具合を探してみてください♪
扇形グラデーション
４つ目は、扇子のように見せる「扇形グラデーション」。
HTML上で作ったdivタグはそのままに、
divタグのCSSで、「background」内に今度は「conic-gradient」を作ります。
もちろん（）内は、必ず「濃い色, 薄い色」を入力しましょう。また、幅と高さは均等にすること。
すると、いつもとはちがって上半分が赤と黄色で隣り合わせになっています！
また、１色追加してそれぞれに値を決めることで、レーザーのようにカッコよく見せることができます！
さらに、角度（deg）と色の長さを変えることもできるんですよ！
反復線形グラデーション
５つ目は、複数の線を突き進むように見せる「反復線形グラデーション」。
HTML上で作ったdivタグはそのままに、
divタグのCSSで、「background」内に「repeating-linear-gradient」を作ります。
「repeating」とは「繰り返す」という意味です。
角度は、ななめ右へと進む「-45deg」とします。
すると・・・複数の線が突き進むように見えます！どうですか？カッコいいですよね！
また、角度（deg）を消すと線がまっすぐ横向きになったり、
角度を「90deg」にするとまっすぐ縦向きになったりと、自由な角度に変えることができます。
反復放射グラデーション
６つ目は、複数の円形を放射風に見せる「反復放射グラデーション」。
divタグのCSSで、「background」内に今度は「repeating-radial-gradient」を作ります。
色の組み合わせは、順番関係なく自由です！
すると、複数の円形が重なり合って見えます！
最後に
いかがでしたか？
皆さんもこのCSSで、あなただけのグラデーション効果を考えてみてください！
以上です、ありがとうございました！
コメント