Home > 技術 > Safari3.1でCSSから文字にアウトラインをつける方法

Safari3.1でCSSから文字にアウトラインをつける方法

文字にアウトラインを付けるなら画像として作ってしまうのですが、Safari3.1では簡単にCSSから装飾ができるみたいです。
このアウトランのCSSプロパティは正式にはCSS3の規格ではないので使うときには注意が必要だ。
(仮に使うとしたら完全にSafariユーザーに対するエコヒイキになってしまいますねw)

文字のアウトライン関連のプロパティは、現状では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

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, JavaScriptな情報をあなたに

Home > 技術 > Safari3.1でCSSから文字にアウトラインをつける方法

Tag cloud
月別アーカイブ
Powered by
Powered by
Movable Type Commercial 4.261

Page Top