opacity

先日「指定した要素を半透明にできるopacity（IEでも使える）」に書いた方法でIEでもopacityが使えるようになります。

.opacity {
    opacity: 0.5;
    -moz-opacity: 0.5

    /* IE6,7 */
    filter: alpha(opacity=0.5);

    /* IE8 */
    -ms-filter: "alpha(opacity=0.5)";
}

border-radius

を使ってborder-rasiusの効果を使うことができます。
behaviorで指定するスクリプトはGoogle Codeで手に入ります。

.radius {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;

    /* IE */
    behavior: url(border-radius.htc);
}

box-shadow

IEのフィルタを使います。

.box-shadow {}
    -moz-box-shadow: 1px 1px 2px #ADADAD;
    -webkit-box-shadow: 1px 1px 2px #ADADAD;

    /* IE */
    filter: progid.DXImageTrandform.Microsoft.Shadow(color='#ADADAD', Direction=145, Strength=2);
}

text-shadow

Text ShadowというjQueryプラグインを使います。

.text-shadow {
    text-shadow: 1px 1px 2px #ADADAD;
}

$(function() {
    $('.text-shadow').textShadow({
        'color'   : '#ADADAD',
        'xoffset' : '1px',
        'yoffset' : '1px',
        'radius'  : '2px',
        'opacity' : 1
    });
}

RGBA

半透明の透過pngを背景画像として使います。

gradient

背景にグラデーションが使えるようになるgradientも使えます！

.gradient {
	background-image: -moz-linear-gradient(top, #81a8cb, #4477a1);
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb));

	/* IE6,7 */
	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');

	/* IE8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')";
}

複数の背景画像

複数の背景画像もfilterを使って実現できます。

/* IE以外 */
#multi-bg {
    background: url(images/bg-image-1.gif) center center no-repeat, url(images/bg-image-2.gif) top left repeat;
}

/* IE */
#multi-bg {
    background: transparent url(images/bg-image-1.gif) top left repeat;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/bg-image-2.gif', sizingMethod='crop'); /* IE6-8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg-image-2.gif', sizingMethod='crop')"; /* IE8 only */
}

要素を回転させる（transform: rotete)

transoformのrotateも使えちゃいます。

#rotate {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);

    /* IE */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

IEでrotateを使いたい場合、数値を細かく指定することができません。指定できるのは1・2・3・4の4つのみでそれぞれ90度・180度・270度・360度だけ回転します。

元ネタ

CSS3 Solutions for Internet Explorer