<< 当サイトのスキン編集お勧め記事 サイドのコメントやトラックバッ... >>
 

投稿欄ヘッダのグラデーション


ブログの玉手箱さんで記事タイトルのグラデーション を説明されています。
私はこのアイディアを参考にIE以外でも表示可能なグラデーションを
説明したいと思います。

a0031863_20395962.jpg

図1 設置例







CSS編集部分


あらかじめグラデーションのイメージを作成しておきます。
このグラデーションイメージをy軸に沿ってリピート表示をします。
みなさんも知っている方法で単純ですが、結構使えます。

グラデーションイメージファイルを見づらいですが図1に示します。
このグラデーションイメージはExcelで作成しました。

a0031863_20403817.jpg

図2 グラデーションイメージファイル






DIV.POST_HEAD {
/*------------------ ここから追加 --------------------*/
background-image:url(イメージURLアドレス);
background-position:left;
background-repeat:repeat-y;
/*------------------ ここまで --------------------*/


}



今日のポイント
  • background-repeat:repeat-y;でY軸方向(上下方向)にイメージを連続して表示しています。




難易度:★★
ちょっと、グラデーションイメージを作るのが難しいかも^^;

ぽっと

CopyRight(C) 2004 All rights reserved by potto37
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-09-17 20:39 | │├投稿欄
<< 当サイトのスキン編集お勧め記事 サイドのコメントやトラックバッ... >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。