[ Tags :: CSS3 ]

IEでもCSS3ドロップシャドウのアップデート

category-icon

 こんばんは、martinです。以前、IEでもCSS3のドロップシャドウ(text-shadowbox-shadow)を使いたいということで、それを可能にするスクリプトを書きましたLink

 で、コメントLink で、IE7以下では、text-align:centerを指定すると影がすごくズレるというご指摘をいただきました(IE8では問題ない)。調べてみると、どうも「text-align:centerの指定が内包されるボックス要素にも適用されてしまう」という、懐かしいIEのバグが原因のようなので、それを修正しました。ついでに、画面のリサイズ(window.onresize)にも対応させました。以下のスクリーンショットのように、Firefox3.6など今時のブラウザに引けを取らない感じで、ボックスシャドウやテキストシャドウが可能になります。
Firefox3
Firefox3.6でのスクリーンショット。ChromeやOperaでもほぼ同じ。
IE7-compatible
IE8で、後方互換モード(IE7相当)表示。遜色ないレベルで再現。

実際のデモのページはこちら。→http://p2b.jp/demo/CSS3dropshadow.htmlLink

 使い方は簡単で、CSS3なページのHEAD要素内に、IE(IE9未満)だけ読み込むような外部JavaScript(実態はHTCファイル)を記述するだけです。最新版を添付しておきますね。

 <!--[if lt IE 9]>
  <script type="text/javascript" src="path/to/css3shadow.htc"></script>
 <![endif]-->

 デモページにもありますが、box-shadowinset(内側ドロップシャドウ)や複数のtext-shadow指定にも対応しています。

Box-shadow-inset
IE7互換モードでの表示。まぁ悪くない。

 スクリプト自体はそんなに凝ってるわけではないのですが、あまり気合の入った指定をしなければ、それなりに動いてくれるかなと思います

   


— posted by martin at 07:36 am   commentComment [7]  pingTrackBack [0]

CSS3のtransformをIE8でも使いたい

category-icon

 こんばんは、martinです。FirefoxやWebKit系のSafari、グーグルのChromeなどは、CSS3の魅力的な機能を色々取り入れています。中でも、CSS3のtransformLink やドロップシャドウ系は、ブログで写真を見せる場合などに凝った演出が出来るので、仕様が正式に決まるのが待ち遠しいですね(そう言えば、ボックスのドロップシャドウ box-shadowですが、CSS3の勧告候補から消えたLink のかなぁ)。便利な仕様だとは思うのですが。

 ちなみに、transformとは「変形」のことで、CSSのみで画像やらボックスやらを自在に回転させたり、ゆがませたりできる優れものです。で、例によってIE系はCSS3の対応は遅れています。とは言っても(これまたいつものように)transformに関しては、IEは実にIE5.5の時から似たようなものを実装していましたLink ! なので、それらを駆使すれば、CSS3相当のtransformが実装できそうです。

 transformが使えると何がうれしいって、例えば以下のようなポラロイド写真みたいなギャラリーがCSSのみで簡単に出来ます。実は下のショットはIE8でのものです。
CSS3-transform-IE8
IEでもCSS3のtransform相当のことが出来る

 画像の回転に関して、FirefoxやWebKit系は、画像の中心を回転軸として回転させます(なので回転軸は移動しない)。これは直感的で分かりやすいです。これに対して、IEは回転軸が指定した回転角度によって刻々と移動します。なので、標準仕様に似せようと思うと、回転軸を動かさない様にするための補正計算が必要になります。この計算にちょっとてこずりましたが、何とか回転軸が動かないような補正をすることが出来ました。

IE rotation
IEでは、ボックスはx軸とy軸に2点が常に接しつつ、すべるように回転するので軸が常に動く。

 で、とりあえずモノになりそうなものが出来たのでデモサイトを挙げておきます。画像へのマウスオーバーで拡大なんてのもCSSのみで出来るのですが、それもIEで動くようにしています。

 

→「CSS3 Transformを使ったギャラリー(IE互換)Link

 FirefoxやSafariでは、完全にCSS3のみで実現していて、IEでは、IE特有のフィルター機能をJavaScirptを通して操作しています。ボックス要素のドロップシャドウについては、以前、まぁまぁ凝ったスクリプトを書きましたLink が、新たに要素を追加しないといけないなど、あまり納得のいくものではありませんでした。今回ドロップシャドウに関しては、あまり凝ることはせずに、IEのフィルター機能を素直にそのまま使っています。
progid:DXImageTransform.Microsoft.dropshadow(enable=true,OffX=3, OffY=7, Color='#11000000', Positive='true');

 実は最近知ったのですが、フィルターのColorには通常のRGB形式だけでなく、透明度も指定できる#AARRGGBBの形式が使えるので、黒色の透明度を高くすればより影っぽくなります。CSS3レベルのぼやけた感じまでは出ませんが、まぁ、これで良しとしましょう。

 使い方は、簡単で、形はHTCファイルですが、JavaScriptの外部ファイルとして動作するようにしてます。これは、以前のドロップシャドウのスクリプトと同じです。それをIEのみが解釈する条件コメントの中に書いています。
<!--[if IE]>
 <script type="text/javascript" src="js/css3transform.htc"></script>
<![endif]-->

 これを書いておくだけで、スタイルシートに記された

     -moz-transform: rotate(-2deg);
  -webkit-transform: rotate(-2deg);
          transform: rotate(-2deg);
などを解釈して、IEのフィルター機能(Matrix Filter)で同等のことを表現します。デモページにあるように、IEでもCSS3のtransformはおよそ実現できるみたいです(まぁ、そもそもがIEのMatrix仕様を参考に実装したのでしょうけど)。

 このスクリプトを添付しておきます。

添付ファイル: css3transform.htcattachedIcon 

 


— posted by martin at 01:02 pm   commentComment [20]  pingTrackBack [0]

T: Y: ALL: Online:
Created in 0.0036 sec.
prev
2024.3
next
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31