CSSと Lettering.js で実現している19種類のタイポグラフィ - 表参道フォークウヱル別館

今回も、Forkwell の各種スキルのロゴのお話。Forkwell に登録されているスキルは、2012年4月20日現在およそ800種類。その内59種類は、スキルのロゴに人手で加工・編集した画像を当て込んでいるというのは前回の記事でご説明したわけですが、それ以外のロゴはどうなっているのでしょうか。 たとえばこの RSpec のロゴ。 どなたかのツイートで「（Forkwell の）RSpec のロゴに愛を感じる」というのを見かけました。しかし申し訳ないのですが、実はこのロゴは自動的に生成され、当てられているものなのです。マウスで「rspec」の文字をドラッグするとわかりますが、その部分は純粋なHTMLのテキストです。（ページ内をそのテキストで検索して、反転させてみるのもおもしろいです） 緑の背景色と黒線の枠、ネズミの絵はdivクラスの背景画像ですが、文字の部分はWebフォントが使われています

[oukayuka]

Lettering.js 便利。

[windscape]

かっけー

[udzura]

20個目のパワーパフガールズをインスパイアしたものがすごい気になる。。。　というかこの自動ロゴ良いなあと思っていた