こんにちは！
フェノメナの技術担当のレミです！
今回は、CSSでグラデーションを作る方法を学んで行きましょう。
グラデーションを作るためのCSSプロパティは「linear-gradient」を使います。
記述方法のとおりです。
div {
background: linear-gradient(<角度>,<色1>,<色2>);
}
例えば、カバー写真に使われてるグラデーションを再現するには、このような記述をします。
div {
background: linear-gradient(45deg, rgb(255,200,150), rgb(100, 100, 255));
}
見ての通り、角度は「degree」の省略である「deg」で指定します。
そこで一つ、あまり知られてないコツですけど、角度は次の文字列でも指定可能です。
– 「to top」：下から上に
– 「to bottom」: 上から下に
– 「to left」：右から左に
– 「to right」：左から右に
– 同じ考え方で：「 to top right」、「 to top left」、「 to bottom right」、「 to bottom left」
また、二つだけの色だけでなく、<色>の宣言を付け足すと、３つ、４つなど、いくらでも、色と色のグラデーションが可能になります。
例えば：
div {
background: linear-gradient(45deg, rgb(255,120,150), rgb(130, 100, 255), rgb(0, 195, 255));
}
・・・を書くと、この様になります：
パラメーターとして、変化位置をかえたりすることもできるので表現豊かなグラデーションを作成できます。
今回のグラデーションは、線形グラデーションといって直線的に色が変化します。
グラデーションのバリエーションとして、他にも円形グラデーション「radial-gradient」があります。
CSSに記述してグラデーションで遊んでみてください！