KOJIKA17

IEでCSS3の効果を出せる。
クロスブラウザ対応 CSSスニペット

影をつけたり、角丸にしたり、便利なCSS3。モダンブラウザは続々と実装されています。
しかし依然としてIEのシェア率が多い現在では、「CSS3を使うのは、ちょっと・・・」と思っている方も多いと思います。
そこでIEのfilterを利用し、JavaScriptや画像を使わずに、CSS3に近い効果を表現できる、
実用的なCSSのスニペットを紹介致します。

Opacity

指定したボックス自体の不透明度を変えることができます。
また指定した要素の下位の要素に対しても、効果が継承されます。
imgのロールオーバーなどの使い道があります。

Opacity Sample

.opacity {
  opacity: .5; /* FireFox, Webkit, Opera */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE5.5+ */
}

RGBA()

指定したカラーの不透明度を変えることができます。
color, background-colorなどに対して効果が与えられます。
カラーのみの不透明度の変更ですので、下位の要素に対し、効果が継承されることはありません。
IE filterでは#rrggbbaa(#rgba)でカラー指定することにより、アルファ情報を付与しています。

RGBA() Sample

.rgba {
  background-color: rgba(180, 180, 144, 0.6);  /* FireFox, Webkit, Opera, IE9 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490')";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99B4B490',EndColorStr='#99B4B490'); /* IE5.5+ */
}

Box Shadow

要素に対して、影の効果を与えることができます。
IE filterのdirectionが角度、strengthが幅になります。

Box Shadow Sample

.box-shadow {
  -moz-box-shadow: 2px 2px 3px #000; /* FireFox */
  -webkit-box-shadow: 2px 2px 3px #000; /* webkit */
  box-shadow:2px 2px 3px #000;
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=3,enabled=true)";
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=3,enabled=true); /* IE5.5+ */
  background:#fff; /* IE Hack */
}

Text Shadow

文字に対して、影の効果を与えることができます。
ただしなぜか、IE8しか動かなかったので原因がわかりましたら、記事を更新します。

hasLayoutが有効化する必要があります。
zoom:1;を入れれば動きます。

Text Shadow Sample

.text-shadow span {
  text-shadow: #0000ff 1px 1px 3px; /* FireFox, Webkit, Opera */
  -ms-filter:"progid:DXImageTransform.Microsoft.DropShadow(color=#0000ff,offx=1,offy=1)"; /* IE8 */
  display:block; /* IE */
}

2D Transform

要素を回転されることができます。
CSS3の場合は、1~360degの間で回転させることができます。
filterの場合は、1~4の間で、90度ごとに回転させることができます。

2D Transform Sample

.trans-2D {
  -moz-transform: rotate(180deg);  /* FireFox */
  -o-transform: rotate(180deg);  /* Opera */
  -webkit-transform: rotate(180deg);  /* webkit */ 
  -ms-transform: rotate(180deg);  /* IE9 */
  transform: rotate(180deg);
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* IE5.5+ */
}

Gradient

グラデーションの効果を与えることができます。
Operaではまだ対応していません。

Gradient Sample

.gradient {
  background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* FireFox */
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* webkit */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')";
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE5.5+ */
}

Multiple Backgrounds

背景画像を複数表示することができます。
IEではAlphaImageLoaderを使用して、1つの要素に対し、2枚の背景画像を設定できるようにしています。
画像はpngを使用していますが、gifなども使用可能です。

Multiple Backgrounds Sample

#multiple-bg {
  background: url(bg2.png) 0 0 no-repeat,
    url(bg1.png) 0 0 repeat; /* FireFox, webkit, Opera */
  *background: transparent url(bg1.png); /* IE lt IE8 */
  background: transparent url(bg1.png)\9; /* IE8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader (src='bg2.png', sizingMethod='crop')";
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='bg2.png', sizingMethod='crop'); /* IE5.5+ */
}

縦書き

縦書きが行えます。ほとんどのブラウザがまだ実装されておりません。
スニペットでは.tcyで文字を通常方向に戻します。

23
縦書きのサンプル

.tategaki {
  -webkit-writing-mode: vertical-rl; /* webkit Dev */
  writing-mode: tb-rl; /* IE5.5+ */
  direction:ltr;
}
.tategaki .tcy {
  -webkit-writing-mode: horizontal-tb; /* webkit Dev */
  layout-flow: horizontal; /* IE5+ */
}