ページの先頭へ
トップに戻る
2017年2月20日 アニメ, Web制作

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

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

ちなみに制作時間は約6時間!貴重な休日が潰れちゃったね!しにたーい!
参考にしたのはけもフレ公式サイトのこれ↓ この画像を参考にしながらpositionで無理矢理レイアウトを組み立てました。見ての通り、「の」と「ズ」の部分は鬼畜です。CSSって丸っこい形は作りにくいんだよね…

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

Kemono Friends Title Logo

完成品がこちらです。

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

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

今回分かったこと

1,CSSで渦巻きを作ると心が折れる。
2,サーバルちゃんは可愛い。
3,サーバルちゃんは可愛い!!!