IE7自動更新開始記念(?)「IE7でSafari風のtext-shadow」
IE7でSafari風の影文字らしきものをつけてみる
Internet Explorer 7 の自動更新による配布が2月13日から開始された(はず)。
現状ではCSSのtext-shadowに対応している主なブラウザはSafariとOpera(9.5)だけで、FirefoxもIE7も対応していない。 一応、FirefoxはText Shadowのアドオンを導入すれば適用できるが、IE7向けにもインチキtext-shadowを適用させてみた。
適用方法
text-shadowのテストとソースを参照してください(手抜き^^;;)
とか書いていたけど、一応説明(IE8が出て今更だが)。 そのIE8対応版はIE8でもtext-shadow参照。
- 影を適用したい要素
- position:relativeに上書き
- expression()で影の部分となるspan要素とともにinnerHTMLを使って要素内に追記
- 追記するspan要素にはclass="shadow"などとclass指定。影を複数指定したり、要素によって影の具合を変えたい場合はclass名を変える
- 影の部分となるスタイル
- 影となるspan要素をdisplay:block; position:absolute;にするとともに、ずらす量(位置)を指定
- filter:progid:DXImageTransform.Microsoft.Blur()で影を装飾
- PixelRadiusは暈かしの範囲(強さ)。MakeShadowはtrueだと黒、falseだとcolorで指定した色が適用される。ShadowOpacityは影の透過度(濃さ)
- 影の複数指定などは適宜指定
"IE7自動更新開始記念(?)「IE7でSafari風のtext-shadow」"へのTwitter上でのコメントやRT
ツイートを取得できませんでした。