IEでCSS3の効果を出せる。
クロスブラウザ対応 CSSスニペット
2011-02-01
約9分で読めます。
影をつけたり、角丸にしたり、便利な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しか動かなかったので原因がわかりましたら、記事を更新します。
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+ */}- Entry Categories
- Browser
- CSS
- CSS3