CSSでMARVELのロゴを作ってみた

マーベル映画が好きだ。

新型コロナウイルスのせいで、今後公開されるMCU映画の公開スケジュールが滅茶苦茶になってしまい、悲しくて仕方ありません。

悲しいついでに、パックマンよりも前に作った作品を公開します。

マーベル関連では3つほど作っており、画像を一切使用せずCSS3のグラデーション効果を駆使して表現しています。

まず1つめは有名なマーベルのロゴ！

CodePen Embed Fallback

かなりのシンクロ度です。
今なら1エレメントで作れると思いますが、初期の作品なのでご勘弁ください。

続いてはアベンジャーズとシールドのマーク！

CodePen Embed Fallback

こちらはそれぞれ1エレメントで作ってあり、フォントサイズの指定でマークの大きさを調整できるようになってます。

最後は映画キャプテン・マーベルのタイトルロゴ！！

CodePen Embed Fallback

こちらもかなりの再現度。
HTMLは若干複雑になってますが、今なら1エレメントで作れそうです。
ただもう作りたくありませんｗ

絶対音感のある人は生活音ですら音符が見えるらしいですが、僕の場合はテレビや映画を見ててロゴなどを見かけると、CSSコードが頭をよぎるようになってきました…。