CSS(スタイルシート)でフッターをフェードアウトさせる

使えるかどうか分からないけどスタイルシートと画像1つでフッターをフェードアウトさせる方法があったので紹介します。
サンプルもあるので設置は問題ないかなと思います。もっといい使い方ありそう。 方法は簡単。以下のコードをどこでもいいので入れるだけ。
<div id="bottom_fade"></div>
CSSはこんな感じ。ちょっと変えてます。
#bottom_fade {
	width: 100%;
	height: 200px;
	z-index: 99;
	position: fixed;
	bottom: 0px;
	background: url("bottom-fade.png") bottom center repeat-x;
}

widthは100%に背景の繰り返しをrepeat-xにしています。底から0pxのところに常に高さ200pxの画像があるということですね。

また、透過画像が使えないIE6用に以下のようにCSSを記述しています。
<!--[if lte IE 6]>
    <style type="text/css" media="screen">
           #bottom_fade {
           background: none;
           filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bottom-fade.png',sizingMethod='scale');
           left: 0px;
           height: 200px;
           position: absolute;
           bottom: -18px;
           width: expression(document.body.clientWidth);
           }
           html, body {
           height: 100%; overflow: auto;
           }
    </style>
<![endif]-->
IE7(Internet Explorer 7)がリリースされて何年も経つのにまだまだ見過ごせない数のIE6ユーザーがいます。以前記事で紹介したように別サイトで集計したところなんと30%も。何とかしてほしいものです。
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
はじめまして。
検索エンジンで調べてたら、こちらにたどり着きました。
勉強になり、とても参考になりました!
また来ます。
【2009/07/25 22:21】 | 名古屋・岐阜のホームページ制作 #4a1thY.. | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加