けものフレンズのタイトルロゴをCSSだけで作ったのー？すっごーい！！

Leo(@Akamaru12mg)はPureCSSでワケの分からないものを作るのが大好きなフレンズなので、けものフレンズのタイトルロゴをCSSのみで作ってみました。

ちなみに制作時間は約6時間！貴重な休日が潰れちゃったね！しにたーい！

参考にしたのはけもフレ公式サイトのこれ↓

この画像を参考にしながらpositionで無理矢理レイアウトを組み立てました。見ての通り、「の」と「ズ」の部分は鬼畜です。CSSって丸っこい形は作りにくいんだよね…

「まぁ、どうにかなるっしょ」と甘い考えで作り始めた結果が、6時間という制作時間です。諦めなかった自分を褒めてあげたい。そして皆に「すっごーい！」って言ってほしい。

Kemono Friends Title Logo

完成品がこちらです。

See the Pen LxKNPm by Kuzlog (@Kuzlog) on CodePen.

最初は「綺麗なコードを書くぞ！」と頑張っていたんですが、「の」を作り始めたあたりから頭がパンクして心が折れてしまい、プロパティの順番や@mixinの使い方がめちゃくちゃになりました。しかもよく見ると1pxズレてるところがあったりしますが、許してください。これが僕の限界です。

今回分かったこと