実際にSafari 3.1で見たところ
text-shadowはFirefox 3.1で対応要諦ですので時間が解決してくれますが、CSSで要素を回転してくれるプロパティはいつ対応になるのでしょうか。
今回、Webkitの独自実装のwebkit-transformを使ってみました。
webkit-transform はCSSを使ってコンテンツを回転・縮小・拡大などが出来るようになります。
それだけでなく、実はTweenみたいな簡単なエフェクトをつけることが出来ます!!
上のようにコンテンツを傾けるのは
-webkit-transform: rotate(-12deg);
このように指定しました。
text-shadowも問題なく適用されています。
今回は基点を中央にしたため特に指定はしていません（デフォルトが中心）
主なプロパティは
- scale(x,y) 拡大
- translate(x,y) 移動
- rotate(angle) 回転
他にもあるけど、簡単に使えそうなのはこれ。
アニメーションの指定
-webkit-transition: all 1s ease-in-out;
まず、親要素にこれを指定しておく。（親じゃなくても良いかも）
あとは上に書いてあるCSSを:hoverにでも仕込んでおけば、マウスオーバーしたときに1秒かけて上の条件になるようにアニメーションします。
マウスアウトしたときも、元に戻るアニメーションがあります。
詳しくはこのサイトにSafari3.1でアクセス!
Safari3.1はCSSアニメーション付き。 [css,safari] - BlurBlue-Note
もちろん同じWebkitを採用しているGoogle Chromeでもアニメーションさせることが出来ます。
ただし、アンチエイリアシングの処理が汚いので…
問題はWebkitの普及率だけですが、使用していたとしても他のブラウザで表示が乱れるわけではないのでちょこっと仕込んでSafariユーザーを歓迎するのも良いかもしれません:P
