CSSと Lettering.js で実現している19種類のタイポグラフィ - 表参道フォークウヱル別館
今回も、Forkwell の各種スキルのロゴのお話。Forkwell に登録されているスキルは、2012年4月20日現在およそ800種類。その内59種類は、スキルのロゴに人手で加工・編集した画像を当て込んでいるというのは前回の記事でご説明したわけですが、それ以外のロゴはどうなっているのでしょうか。 たとえばこの RSpec のロゴ。 どなたかのツイートで「（Forkwell の）RSpec のロゴに愛を感じる」というのを見かけました。しかし申し訳ないのですが、実はこのロゴは自動的に生成され、当てられているものなのです。マウスで「rspec」の文字をドラッグするとわかりますが、その部分は純粋なHTMLのテキストです。（ページ内をそのテキストで検索して、反転させてみるのもおもしろいです） 緑の背景色と黒線の枠、ネズミの絵はdivクラスの背景画像ですが、文字の部分はWebフォントが使われています
HTML と CSS のみでタブを作るサンプル
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 ul.tab { margin: 0; padding: 0; border-bottom: 2px #ddd solid; } ul.tab li { float: left; margin: 0 0 0 5px; position: relative; bottom: -2px; list-style-type: none; border: 1px #ddd solid; border-top: none; border-bottom: 2px #ddd solid; } ul.tab
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
