CSSエフェクト

角丸

CSSで角を丸くするエフェクト処理です。

border-radius:0～100px;
background-clip:padding-box;（角丸部分がにじむ場合は追加）

透過

CSSで透明にするエフェクト処理です。

opacity:0～1;（小数点も使用可能）

動的なCSSエフェクト

アクティブボタンの利用方法

現在表示中のページのボタンを変更する方法です。
表示中のボタン色を変更する事で、現在地を視覚的に判断しやすくできます。

1. HTML：現在地のボタンだけclassやidをclass="active"、id="active"に変更する
2. CSS：.active {色、画像、サイズなどを指定する}、#active {色、画像、サイズなどを指定する}

マウスオーバーで表示を変化させる

ロールオーバーはマウスカーソルを画像や文字の上に移動した時に変化させる手法です。
CSSの場合はa:hover、display:block、スペイサーGIF（空要素回避用）、画像2種で作成できます。
ダウンロード（spacer.gif）

CSSの書式1：.rollover a {display:block; width:通常時の画像の横幅; height:通常時の画像の縦幅; background:url(通常時の画像ファイルのパス);}
CSSの書式2：.rollover a:hover {width:変化時の画像の横幅; height:変化時の画像の縦幅; background:url(変化時の画像ファイルのパス);}
HTMLの書式：<div class="rollover"><a href="変化時の画像ファイルのパス"><img src="spacer.gifのパス" alt=""></a></div>

その他の動的CSSテクニック

その他の動的CSSテクニック情報です。
CSSアニメーション