CSS3のボーダーの新機能(-webkit
, ...)により、フォントにボーダーを追加することが可能になりましたか?(青いTwitterロゴの周りにある白のボーダーのように)。そうでない場合、CSS/XHTMLでこれを実現するためのあまり醜くないハックがあるのでしょうか、それともPhotoshopを起動する必要があるのでしょうか?
cssのtext-shadow
(または-webkit-text-shadow
/-moz-text-shadow
)と非常に低いブラーを使用して、テキストストロークを emulate することができます。
#element
{
text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset 'blur' colour */
-moz-text-shadow: 0 0 2px #000;
-webkit-text-shadow: 0 0 2px #000;
}
しかし、この方法は -webkit-text-stroke
プロパティよりも広く利用できますが、ユーザーの大部分が利用できるかどうかは疑問です。
私はかつて、css3で角丸やドロップシャドウをやろうとしたことがあります。後になって、まだサポートが不十分であることを知りました(もちろん、Internet Explorer(s)です!)。
結局、JS(IE Canvasを使ったHTML Canvas)でやろうとしましたが、パフォーマンスにかなり影響します(私のC2Dマシンでさえも)。要するに、どうしても効果が必要な場合は、JSライブラリを検討する(ほとんどのものはIE6で動作するはずです)が、パフォーマンスの問題からやりすぎないようにしましょう。それでも代替手段が必要な場合は...SFiRを使って、PSしてSFiRするという方法があります。CSS3は今日では間に合いません。