フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

台風の影響が凄いので、CSSだけでtyphoon作ってみた

台風🌀は、とても強い。

つまり、台風🌀を生み出す力を手に入れれば、とても強い人間になれる。

僕は強くなりたい。

というわけで、作ってみました。

typhoon.gif

台風の絵文字って?

そもそも、台風の絵文字にはいろいろな種類がある。
このサイトで一覧できるんだけど、
代表的なのはこんな感じ。

apple google microsoft
apple.png google.png mycrosoft.png

emojipedia.org/cyclone/より

appleの絵文字は、単なる渦巻きだし、microsoftだとちょっと複雑すぎるので、
作りやすそうなgoogleの絵文字を再現してみます!

まずは形をつくる

原型をつくる

まずは、細かいところを気にせずに原型を作ってみます。
枠線、背景のグラデーションなどに気を配ります。

See the Pen typhoon-origin by Spice (@spice-z) on CodePen.

ととのえる

次に、ギザギザの部分を作ってみます。
こういう形をcssで作るのはあまりやったことがないのだけれど、構造を考えたりするのが難しいですね。
どうやって作ろうか悩んだけど,
border-radiusを駆使した白色を重ねて実装することにしました。
そうして出来上がったのがこちら!

See the Pen typhoon-shape by Spice (@spice-z) on CodePen.

結構違う形になってしまいましたが、これはこれで良いと思います。
とんがり具合を作るのが、難しかったですね。

そして動かす

本当は反時計回りなのですが、google仕様だと時計回りなので、そちらに合わせます。
回転しながら、北東に進もう。
そうして出来上がったのがこちら!

See the Pen typhoon-rotate by Spice (@spice-z) on CodePen.

うん、いい感じだ!

感想

1〜2時間で作れたのですが、一番苦労したのは、border-radiusの部分でした。
それほど駆使した経験がないので、
CSSでいろんなカタチを表現してみる
css border-radius の使い方。円や扇をジェネレータで描いてみる
これらのサイトを参考にさせていただきました。
cssで絵をイラストを書いたことはなかったのですが、案外なんでもできそう。
機会があれば、また作ってみようかな!

[紹介元] CSSタグが付けられた新着投稿 – Qiita 台風の影響が凄いので、CSSだけでtyphoon作ってみた

コメント

記事に戻る

コメントを残す