- 2008-07-01 (火)
- 技術
文字にアウトラインを付けるなら画像として作ってしまうのですが、Safari3.1では簡単にCSSから装飾ができるみたいです。
このアウトランのCSSプロパティは正式にはCSS3の規格ではないので使うときには注意が必要だ。
（仮に使うとしたら完全にSafariユーザーに対するエコヒイキになってしまいますねｗ）
文字のアウトライン関連のプロパティは、現状ではCSS 3の規格には取り込まれておらず、W3Cに対して提案されている段階のものだ。
via: 文字のアウトラインを表示する--FirefoxとSafariのCSS対応 - page3 - builder by ZDNet Japan
アウトラインをつけるCSSの使い方
div {
font-size: 64px;
font-weight: bold;
color: skyblue;
-webkit-text-stroke-color: darkblue;
-webkit-text-stroke-width: 3px;
text-decoration: underline;
}
他にも-webkit-text-stroke-colorと-webkit-text-stroke-widthをいっぺんに指定する-webkit-text-strikeや、Safariで色指定する-webkit-text-fill-colorといったプロパティがありますがここでは割愛しています。
Safari3.1で表示した場合
Firefox3で表示した場合
IE7で表示した場合
おお！Safariだけデコレーションされてます。
他のブラウザではcolorプロパティの色が優先されているのでまったく別物になっていますね。
さぁ使う機会はあるでしょうか？
■関連リンク
・文字のアウトラインを表示する--FirefoxとSafariのCSS対応 - builder by ZDNet Japan
・Safari 3.1でWebフォントを利用する--SafariのCSS対応 - builder by ZDNet Japan
【関連する記事】
- Newer: imgタグでonloadイベントを使う
- Older: こんなユルさがあれば楽しいかも
Comments:0
Trackback:0
- TrackBack URL for this entry
- http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1059
- Listed below are links to weblogs that reference
- Safari3.1でCSSから文字にアウトラインをつける方法 from HouseTect, JavaScripter Blog
