CSSでリアルな雲を作るぞ!
まずCSSだけでリアルな雲を作ろうと思って調べてみました。
するとCSS3D Cloudsが出てきました。
このサイトを見れば分かると思いますが、リアルな雲が3Dで表現されています。
とてもリアルなのでこのサイトを参考にCSSを書けば簡単にできると思いましたが、F12を押して察しました。
「雲自体は画像だ...」
ここから雲を作る面倒くさい旅が始まります。
他に調べてもリアルな雲をCSSで作ろうとしている人は見当たらず、しょうがなく「リアル 雲 描き方」で検索し、絵を描く方法を参考にしながらCSSで雲を作りました。
絵を描く用の方法なのでHTML&CSSでやると面倒くさいですが、それ以外方法はありません。
今回参考にしたリアルな雲の描き方の記事はこちら↓
a-kin.com
コードとか(略)
上で紹介した記事の方法をCSSでしただけですので記事を読んでください!
コードを載せようと思いましたが、同じようなコードがずっと続くのでGitHubのほうを見てください。
github.com