動点P
面白い技術を見つけたので紹介と、自分なりに工夫してみたよ！
See the Pen Animated Weather Icons by Josh Bader (@joshbader) on CodePen.
Codepenで素晴らしい雲の作り方があったので紹介。
どうやらこの方が使っているのはbox-shadowみたいです。影でできる線を使ってこんなことができるんですね。凄い。
自分もやってみました！そのままだとアレなので、影の部分をずらして、線に強弱があるかのように表現してみました。
See the Pen 雲 by inu (@tenp) on CodePen.
二つ目の雲をわかりやすいように色を変えています。
box-shadowプロパティの値（四つの値＋色のとき）
box-shadow: 2px 2px 2px 1px red;
offset-x | offset-y | blur-radius | spread-radius | color
box-shadow
offset-x で水平方向の影の長さを指定します。（マイナスを入れると影は左に出ます）
offset-y で垂直方向の影の長さを指定します。（マイナスを入れると影は上に出ます）
blur-radius は値が大きくなるほど影のぼかしが強くなります。
spread-radius は影の面積の大きさを指定します。
これらを用いて、上下左右の影を指定し、さらに作った影の下に影を作るなどして影を重ねて形を作っています。
コメント