Web制作ネタを中心に、ネット上の様々な情報をゆる~く発信する個人ブログです

KuzLog

2017/02/20 2018/01/13 Web制作, アニメ

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

Leo(@Akamaru12mg)は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,サーバルちゃんは可愛い!!!