CSS3のグラデーションをIE7.8でも使いたいからIEハックを書くんだ！
CSS3にはグラデーションというすばらしいプロパティがあるんですが、やっぱりIEはCSS3に対応していないのだな。
なので、CSS3のグラデーションをIE7や8にも適応させる為のIEハック。つぅか、IEってなに？頑なにCSS3を実装しない理由がわかんない。
なんでCSS3のグラデーションが使えないんだ！と嘆いていてもしょうがないので、やっぱりIEハックを使わなければならんですよ。
このIEハックの呪縛からは、当分逃げれなさそうですね。
ソリューション？
#gradient {
background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* これはFirefox 3.6 用*/
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* これはSafari & Chrome などのwerbtik系*/
/*ここから問題のIEハック*/
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */
}
#gradient {
background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* これはFirefox 3.6 用*/
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* これはSafari & Chrome などのwerbtik系*/
/*ここから問題のIEハック*/
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */
}
このIEハックにあるGradientTypeってのは、グラデーションの方向をさしていますんで、”=0″は水平 “=1″は垂直方向になります。多分、角度は入力出来ないっぽいですわ。
ネタもとは、SmashingMagazine CSS3 Solutions for Internet Explorer
関連する記事
以下の記事が関連がありそうです。Facebook comments:
