mrs.suzu841.com 管理人の四方山(よもやま) tips





edit.gif CSS3 PIE で背景のグラデーションを反映させる

http://github.com/lojjic/PIE/downloads より PIE をダウンロードします。
ダウンロードした " PIE-1.0beta2.zip " を解凍すると " PIE.htc " , " PIE.php " , " PIE_uncompressed.htc " の3種類が入っていますが、ここで使うのは " PIE.htc " です。(Pie を使わないで IE などに対応させる記述はこちら。

例えば、Firefox でページの背景色に #e4f1ff, #97b0f2, #1727aa の3種類を使い、グラデーションをかける場合、スタイルシートに以下のように追記しておきます。
赤い文字の部分がPIEの設定になります。
この時に " behavior: url(PIE.htc) " の url のカッコの中の " PIE.htc " がある場所は各自環境に合わせて変更してください。


body {
background: -moz-linear-gradient(top, #e4f1ff, #97b0f2 50%, #1727aa);
-pie-background: linear-gradient(#e4f1ff, #97b0f2 50%, #1727aa);
behavior: url(PIE.htc);
}



html の方には <head></head> 部分に " <script type="text/javascript" src="PIE.htc"></script> " と記述しておきます。
当然のことながら、ここも " src="PIE.htc " の " PIE.htc " がある場所はそれぞれの環境にあわせて変更します。