CSS3 for tomorrow [ver.LP9] 2 - 魔女のささやき

福田泰雄（ふくだ・やすお）

テキスト装飾と実例

HTMLコーダ件プログラマ
サーバインストールからCGI作成まで
携帯サイトのバックエンド作成が多い

text-shadow

テキストについて影をつけることができる
色、X軸、Y軸　ぼかし　を指定

「みやすくする」
背景色と文字色がおなじでも、影をつけるとよめる

たくさん影をつけることができる
重なり順：よくわからん　Operaではあやしい

２色の暖色の影：ネオンっぽい装飾
３色でおおきくぼかす：レンズフレアっぽい
隆起させる
凹ませる：錯覚　拡大してよくみると隆起している

主な用途
コントラストをあげる→可読性の向上
立体感をだす→見出しを目立たせる

実例
BODYにすごく小さい値をつける：アンチエイリアスオフのときにエッジがなめらかにみえるおまけつき

DavidSeDandro：CSSを使った実験サイト
マウスオーバーで立体感のあるロゴがでてくる
マウスオーバーでサイズ拡大しながらでてくる

BEERCAMP
とびだす立体的なロゴ：30枚の影　影色を変えてニュアンスを出す
光があたっている影

SXSW　Sesign　WorkShop
aruk　Ates：ProgressiveEnhanhment：MacWebKit　IE8で比べるとよい

まとめ

CSS3利用ケース
特定のブラウザに限定できるとき
工数をあまりかけられないとき
＋αぶぶんでさりげなく

例：プロトタイプ
社内案件の管理画面
シャドウだけ

めんどくさいところを、とりあえず簡単に実装できる

ProgressiveEnhanhment
先進的なブラウザで特に綺麗にみえるように
例：MOSe（4〜5年前）Mozilla、Opera、Safari、、、？
cf　IE6でみると「アナログ」とかグレー表示になる

IE9
IEということであきらめてほしくない（笑）
今のうちに意見をいおう！
希望をもって！

＜感想＞
タイポグラフィにしぼってわかりやすい話でした。
がんばってChromeで組んでも、数%のユーザだしなーと弱腰な私。