HTML Archive

CSS3 Generatorでさっくり作る
ここ見てだいたい確認
完成

注意

• IEのフィルターは上の文字にアンチエイリアスかからないとかいうバグがあった気がするので注意
• 当たり前の話だが、rgbaで透明度設定してるのは下に書かないと別の色で上書きされる
• 当たり前の話だが、backgroundとbackground-imageとか別々に書いてると上書きされない

http://code.google.com/webfonts ここのリストから好きなフォントをクリック
↓
[Launch in font previewer] てボタンをポチっとな
↓
右下に黄色で反転してる領域からそれぞれコピー
↓

<link  href="//fonts.googleapis.com/css?family=hogehoge" rel="stylesheet" type="text/css" >
<style>
body {
	font-family: 'fugafuga', serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 400;
	text-shadow: none;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0em;
	word-spacing: 0em;
	line-height: 1.2;
}
</style>

上の2箇所をそれぞれ

@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=hogehoge);
h1 {
	font-family: 'fugafuga', serif;
}

つー感じにコピペして、ファイル名を適当に font-setting.css とかつけて、使いたいcssから
@import url("font-setting.css"); で引っ張ってくればおｋ。

いままではこんな感じのボタンで、マウスカーソル重なったら右の画像を読み込むor先に読み込んどくっていうのをjavascriptでやってたわけだが、今のブラウザの機能とか踏まえると常識的に考えて無駄なのでCSS使って実装する。

具体的には、

1. divでピクセル指定したボックスにこのキュベレイみたいな画像を背景で置く。
2. 左側に文字で名前置く。クリック範囲が狭い問題は文字余白とかで増やす。
3. 文字の背景に、マウス乗ってるときと乗ってないときで切り替わるグレー背景画像をアルファチャンネルで透過させたPNGにして置く。

利点は、

• ファイル転送量が超減る=読み込み速い
• 背景差し替えだけで済むので更新が超ラク
• 文字ミスも楽々修正
• ソースが綺麗になり見やすい

難点は、

• 文字を変えれない(前はマウスホバーで日本語に切り替えてた)
• PNGアルファチャンネル透過だと乗算合成とか使えないのであんまりうつくしくない

と、ここまで書いてからテキストを縦書きにするのはIE7だけが微妙な対応だったと思い出してどうしたもんかな、と思い至った。

追記：

ということだったんだがガサ入れしたらば、IE7のみが独自拡張で縦書きサポートしてて、それ以外のブラウザは一切未対応のようだった。
こりゃ諦めて文字部分も画像にするしかないんかなぁ。

追記：

日本語なら横幅詰めてそれっぽくはできるんだが、こと英字については字を横に回転させることはできないのでムリくせぇ。
ので無難にCSSロールオーバーに落ち着いた。