CSS3+HTML5

IE対応。CSS3でグラデーションをかける方法

2013年1月29日  

CSS3を使ってグラデーションを作るとき、IEの場合はIE独自のfilterを用います。

IE5.5以上で有効なので、ほぼもれなく対応できます。

filter: progid:DXImageTransform.Microsoft
.gradient(GradientType=0,startColorstr='#ffffffff', endColorstr='#ffdddddd');

GradientTypeが【引数】で、startColorstrは【開始の色】、endColorstrは【終了の色】です。

引数「GradientType」は、縦方向のグラデーションなら【0】、横方向のグラデなら【1】をいれます。

色の番号は通常の6ケタに、2ケタ加えた8ケタです。

最初の2桁は色の透明度の指示です。

00(透明)〜FF(不透明)。

【#FFFFFFFF】なら、【FF(不透明)】+【FFFFFF(白)】という意味になります。

 

Webkit系(Chrome、Safari)の

background: -webkit-gradient(linear, center top, center bottom, from(#FFFFFF), to(#DDDDDD));

mozilla系(Firefox)の

background: -moz-linear-gradient(top, #FFFFFF, #DDDDDD);

と一緒に使えば、既存のブラウザはほぼ対応できます。