伸びる背景、linear-gradientまとめ

お疲れ様です。

かなり前に、伸びる背景の記事を投稿いたしましたが、結果が分かりづらかったかと思いますので、改めてcodepenさんにてどんな感じの動きになるのかを再投稿のような形でご案内できたらと思います

また、グラデーションの内容ついでで、cssの linear-gradient と radial-gradient を使ったグラデーションについても勉強しましたので、一緒に載せておきます。

See the Pen Untitled by mtzkmy (@mtzkmy) on CodePen.

「伸び～る背景」のコードだけ投稿前に順番を入れ替えたので、cssのコードは順番がhtmlとは違っており、見づらくなってしまい申し訳ありません
それと不要なコードも消し忘れております…

cssで linear-gradient を使ってのグラデーションは簡単にできてびっくりでした！
カラーコードさえ調べれば、好きなようにグラデーションできますし、
%を使えば、**「#〇〇〇の部分は少なめor多めにしたい」**ができます。

角度によって方向の指定もできますので、今回は90deg（左から右にグラデーションする）にしていますが、ここの角度の部分を to bottom right とすると、角度は45度指定になりますが、右下へ向かってグラデーションしていくといったこともできるようです。
左右だけではなく、 top とすると上から下への方向も可能です。

円形にグラデーションする radial-gradient についてですが、ご覧の通りではありますがfff 20%の部分が中心から見て20%の範囲の色指定で、ff66cc 70%が、外側の色指定になっています

最後の縞模様についてですが、%を使って色の範囲を指定していきますが、コードの通り、次の色と色の間をなくしてぴったりと範囲指定しておかないと色と色の間でグラデーションになってしまい、縞模様になりませんでしたのでご注意を（経験済）